Shulou(Shulou.com)06/02 Report--

This article introduces how to solve the browser compatibility problem when building a DIV+CSS station, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

Compatibility problems and matters needing attention of DIV+CSS Station Building to browser

Using DIV+CSS framework has many advantages, but there are also some problems. Now the biggest headache for web designers is the compatibility of DIV+CSS to the browser. You may be used to using IE6, and you don't feel much abnormal when you do it. But if you put the same thing into IE7, you will find a lot of problems. If you look at it in Firefox, the result will be even less satisfactory.

A page from the beginning of production determines which browser to use to parse css mode, the browser mode is different, resulting in different browsers to display the page. There are two modes for browser parsing css, quirksmode and strictmode, both of which are supported by the browsers currently in use. When there is no DTD declaration or DTD declaration below HTML4 (excluding HTML4) in the doctype declaration, almost all browsers use quirksmode rendering, while others use strictmode parsing.

The difference between the two modes is the current interpretation of the box mode. What is box mode? This is for block-level elements. To put it simply, think of block-level elements as a box of things, while the css attributes of margin,padding,border,width make up the box pattern. The difference lies in the width attribute.

◆ in strictmode:

Width is the content width, that is, the true width of the element = margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right

◆ in quirksmode:

Width is the actual width of the element, content width = width- (margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)

Matters needing attention when building a DIV+CSS station:

◆ inline elements, such as, and so on, define the upper and lower boundaries without affecting the row height (line-height), and the distance of the inline elements from the previous row of elements is determined by the row height, not the fill or boundary. Note 2. Inline elements (display:inline) inline elements do not need to be displayed in new lines, and do not force subsequent elements to wrap, such as a, em, span, and so on. An inline element can be a child of any other element.

The boundary of a ◆ floating element (whether left or right floating) is not compressed, and if the floating element does not declare a width, its width tends to 0, that is, to the minimum width that its content can bear.

◆ if there is no content in the box, even if the width and height are defined to be 100%, it actually accounts for only 0%, so it will not be displayed. You should pay special attention to this when adopting a layer layout.

The boundary value of ◆ can be negative, and its display effect may vary from browser to browser.

The ◆ fill value cannot be negative.

The default style of the ◆ border (border-style) is not displayed (none)

Other considerations:

The div of 1.float must be closed, that is, the float is cleared.

Example: (where the properties of floatA and floatB have been set to float:left;)

The NOTfloatC here doesn't want to continue panning, but wants to move down. There is no problem with this code in IE, the problem lies in FF. The reason is that NOTfloatC is not a float tag and the float tag must be closed.

So you have to clear the float at the end.

Define as follows. Clear {clear:both;}

two。 Pay attention to the problem of doubling margin

Now margin and padding are the most used in the DIV+CSS layout (for compatibility reasons). The div set to float float will double the margin set under ie, so add display:inline to this div.

Example:

The corresponding css is

# FloatA {float:left; margin:5px;/*IE is understood as 10px*/ display:inline;/*IE and then 5px*/}

Having said so, in the final analysis, it is still a matter of CSS interpretation, so when making DIV+CSS pages in the future, we should follow the W3C standard, declare doctype, let browsers parse CSS according to strictmode mode, and always pay attention to the differences among IE6, IE7 and Firefox, which will avoid a lot of compatibility problems and make better works.

On how to solve the DIV+CSS site when the browser compatibility problem is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.