div CSS Layout compatibility issues

In strict mode:
Width is the content width, that is, the element's true width = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + M Argin-right;

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

Other things to keep in mind:
• Inline elements, such as <a>, <span>, and so on, define that the upper and lower bounds do not affect the row height (line-height), and the distance of the inline element from the previous line element 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 a new line, and do not force subsequent elements to wrap, such as a, EM, span, etc. are inline elements. Inline elements can be child elements of any other element.
• Floating elements (whether left or right floating) are not compressed, and if the floating element does not declare a width, its width tends to be 0, which is the minimum width that the content can withstand.
• If there is no content in the box, even if the width and height are defined to be 100%, in fact only 0%, so it will not be displayed, this point in the use of layer layout should pay special attention.
• The boundary value can be negative and its display may not be the same for each browser.
• The padding value cannot be negative.
• Border Default Style (Border-style) is not displayed (none)

Ie6,ie7 and FF firefox browser differences and compatibility methods:
1. IE7 has as many as 200 improvements compared to IE6, but they are all implemented under strict mode, i.e., at the top of the page, the DOCTYPE is XHTML Transitional, XHTML strict, and so on. And in quirks mode, IE7 and IE6 indistinguishable. Therefore, in order to better compatibility, as far as possible to declare DOCTYPE, using strict mode for production.
2. IE7 supports PNG images of alpha channels, but these alpha channel images do not display properly under IE6, so use transparent GIF images as much as possible.
3. The IE7 box model has changed: The box uses the "visible" default value for "Overflow", so when the child element size is greater than the parent element size, IE7 will show the child elements outside the parent element as in Firefox. Instead of IE6 the parent element like that. Contains child elements. Set the page to "Overflow:visible".
4. A div set to float doubles the margin set under IE. This is a bug that IE6 exists. The solution is to add "display:inline" to this div.
5. IE and Firefox have different definitions of ' width ':
in Firefox: container width = content width +padding width +border width;
ie: content width = container width you defined (Internet Explorer ' Width ')-padding widths-border width
(Internet Explorer ' width ' refers to the entire container width, including content, padding, border)

6. CSS Layout Center problem: FF Firefox set margin-left, margin-right for Auto is already centered, ie set body {text-align:center;}
7. FF Firefox set padding, Div will increase height and width, but IE will not, it is necessary to use!important to set a height and width
8. The box model in Mozilla Firefox and IE does not explain inconsistencies resulting in 2px resolution: div{margin:30px!important;margin:28px;}
9. UL tag in FF Firefox default is padding value, and in IE only margin has value so define ul{margin:0;padding:0 first;}
10. End the workaround:
(1)!important:ff Firefox and IE7 for "!important" will automatically first resolve, IE6 is ignored, can be!important for FF Firefox and IE7 set the style alone, does not affect the IE6 display, it is worth noting that the XXXX must be! Important this sentence on top of another sentence.
Example: div{margin:30px!important;margin:15px;}//margin:30px in FF Firefox and IE7, margin:15px in IE6;
(2) because FF Firefox and IE7 both support "!important", and there are differences between the two, so sometimes there are some small problems, for IE7 can use the use of "*+html",
Example: #example {color: #333;}//FF Firefox font color shown as #333 */
* HTML #example {color: #666;}/* IE6 the font color is displayed as #666 */
*+html #example {color: #999;}/* IE7 the font color is displayed as #999 */

Other precautions:

1. Float's div must be closed, i.e. clear floating
Example: (where the properties of Floata, FLOATB are already set to Float:left;)

<div><div id= "Floata" ></div><div id= "FLOATB" ></div><div id= "NOTfloatC" ></ Div></div>

The NOTFLOATC here do not want to continue panning, but want to go down the line. This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed.
So you have to <div id= "FLOATB" ></div> back plus clear float <div></div>
The definitions are as follows. Clear{clear:both;}

2. Pay attention to the issue of margin doubling
Now DIV+CSS layout with the most to the number of margin and padding (for compatibility are as little as possible), set to float after the div set in IE will double the margin, so in this div add display:inline;
Example: <div id= "Floata" ></div>
The corresponding CSS is

#FloatA {Float:left;margin:5px;/*ie understood as 10px*/display:inline;/*ie under the 5px*/}

div CSS Layout compatibility issues