Problems and notes on browser compatibility of Div + CSS website construction

Using Div + CSS architecture has many advantages, but there are also some problems. The biggest headache for web designers is the compatibility between Div + CSS and browsers. You may be used to IE6, I didn't feel much exception when I put the same things in IE7, but I found a lot of problems. If I put the same things in Firefox, the results would be less satisfactory.

From the very beginning of the creation, a page determines the CSS resolution mode of the browser to be used. The different browser modes lead to different Browser display differences on the page. There are two modes for parsing CSS in the browser: quirks mode and strict mode. Currently, the two modes of the browser are supported. In the doctype declaration, when you do not use a DTD declaration or a DTD declaration below html4 (excluding html4), basically all browsers use quirks mode for rendering, while others use strict mode for parsing.

The biggest difference between the two modes is the explanation of the box mode. What is the box mode? This is for block-level elements. To put it simply, we simply think of block-level elements as a box for loading things, while margin, padding, border, width these CSS attributes constitute the box mode. The difference is that it is generated on the width attribute.

In strict mode:
Width indicates the content width, that is, true width of the element = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

In quirks mode:
Width indicates the actual width of the element, content width = width-(margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

Other considerations:
· Inline elements, such as <A> and <span>, define the upper and lower boundary and do not affect the line-height. The distance between inline elements and the element of the previous row is determined by the Row Height, instead of filling or boundary. Note 2: The Inline element (display: inline) does not need to be displayed in the new line, and does not force the line break of the subsequent element. For example, a, em, and span are all inline elements. An inline element can be a child element of any other element.
· The floating element (whether Left or Right floating) boundary is not compressed. If the floating element does not declare the width, its width tends to 0, that is, the minimum width that can be compressed to its content.
· If there is no content in the box, even if both the width and height are defined as 100%, it actually only accounts for 0%, so it will not be displayed. Pay special attention to this point when adopting layer layout.
· The boundary value can be negative, and the display effect may vary with browsers.
· The fill value cannot be negative.
· The default border style (border-style) is not displayed (none)

The differences and compatibility methods of IE6, IE7, and FF Firefox are described as follows:
1. compared with IE6, IE7 has more than 200 improvements, but they are implemented in strict mode, that is, the header declares that doctype is XHTML transitional, XHTML strict, and so on. in quirks mode, IE7 and IE6 are the same. Therefore, for better compatibility, try to declare doctype and use strict mode for production.
2. IE7 supports PNG images of the alpha channel, but these images of the alpha channel still cannot be normally displayed under IE6, so we should try to use transparent GIF images.
3. the IE7 box model has changed: the box uses the default value of "visible" for "overflow", so when the size of the child element is greater than that of the parent element, IE7 will expose child elements outside of the parent element like Firefox, rather than adding parent elements to include child elements like IE6. set the page to "overflow: visible.
4. The DIV set to float doubles the margin set in IE. This is a bug in IE6. The solution is to add "display: inline" in the div ".
5. The definitions of 'width' are different for IE and Firefox:
In Firefox: Container width = content width + padding width + Border width;
In ie: Content width = the container width you define (Internet Explorer 'width')-padding width-Border Width
(Internet Explorer 'width' refers to the width of the entire container, including content, padding, Border)

6. Center of CSS layout: If margin-left is set in FF Firefox and margin-right is set to auto, the center is set in IE and the body {text-align: center;} is set.
7. After FF Firefox sets padding, The DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.
8. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px ;}
9. UL labels have padding values by default in FF Firefox, while in IE, only margin has a value. Therefore, UL {margin: 0; padding: 0;} is defined first ;}
10. Final Solution:
(1 )! Important: FF Firefox and IE7 "! Important "will automatically give priority to resolution, while IE6 will be ignored, available! Important sets the style separately for FF Firefox and IE7 without affecting the display of IE6. It is worth noting that you must set XXXX! The important sentence is placed on the other sentence.
Example: div {margin: 30px! Important; margin: 15px;} // in FF Firefox and IE7, margin: 30px, margin: 15px in IE6;
(2) because both FF Firefox and IE7 support "! Important, and there are also differences between the two, so sometimes there are some small problems, for IE7 can use "* + html ",
Example: # example {color: #333;}/* FF show the font color as #333 */
* Html # example {color: #666;}/* display the font color in IE6 as #666 */
* + Html # example {color: #999;}/* display the font color in IE7 as #999 */

Other considerations:

1. The DIV of float must be closed, that is, clear the floating
Example: (floata and floatb attributes have been set to float: Left ;)
<Div>
<Div id = "floata"> </div>
<Div id = "floatb"> </div>
<Div id = "notfloatc"> </div>
</Div>
The notfloatc here does not want to continue translation, but wants to move down. This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
Therefore, you must clear the floating behind <Div id = "floatb"> </div> <Div class = "clear"> </div>
Definition:. Clear {clear: Both ;}

2. Pay attention to the margin doubling problem.
Currently, the largest number of margin and padding is used in the DIV + CSS layout (to ensure compatibility, use as little as possible). The margin set for div after float floating will be doubled in IE, therefore, add "display: inline" to the div;
Example: <Div id = "floata"> </div>
The corresponding CSS is
# Floata {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}

After talking about this, it is still the explanation of CSS. Therefore, we should follow the W3C standard when making Div + CSS pages in the future, declare doctype, and let the browser parse CSS in strict mode, always pay attention to the differences between IE6, IE7, and Firefox browsers, so as to avoid many compatibility issues and make better works.