Key points and tips on CSS webpage layout compatibility

IE vs FF
CSS compatibility highlights: doctype affects CSS Processing
FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE is not working.
FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.
FF: After padding is set, the DIV will increase the height and width, but IE will not, so we need to use it! Set one more height and width for important.
FF: Yes! Important, ie is ignored, available! Important sets a special style for FF
Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.
Cursor: pointer can display the cursor finger shape in IE ff at the same time, hand only ie Can
FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space XHTML + CSS compatibility solution small set in menubar.
There are many benefits to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write down some of my problems below.
1. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:
Example source code [www.51aspx.com]
Div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:
Example source code [www.51aspx.com]
Div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

2. the box interpretations of ie5 and IE6 are inconsistent. Div {width: 300px; margin: 0 10px 0 10px;} Div width is interpreted as 300px-10px (right filling) -10px (left filled) the final Div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, we can make the following changes:
Example source code [www.52css.com]
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

3. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.
Example source code [www.51aspx.com]
Ul {margin: 0; padding: 0 ;}
Most problems can be solved.

4. For the script, the language attribute is not supported in xhtml1.1.CodeChange
Example source code [www.51aspx.com]

You can.

Here is a box with width: 500px; margin: 10px; padding: 10px; Border: 10px.
Use widht (Space)/**/: 530px to solve the box parsing bug of ie5.x series, because ie5.x series browsers can read this sentence. The results are consistent in ie5.x win and ie6.0 win.
How to Use hack to solve the ie5.x box parsing bug? # Content {
Width: 530px; // This is the incorrect width, which is read by all browsers.
Voice-family: "\"} \ "; // ie5.x/win ignores the content after "\ "} \"
Voice-family: Inherit;
Width: 500px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old one.
}
HTML> body # Content {// html> body is written in css2.
Width: 500px; // the browser that supports the css2 statement has the honor to read this sentence, which is not supported by IE 5.x.
} # Content {
Width: 500px! Important; // This is the correct width, most of which are supported! The browser marked with important uses the value here
Width (Space)/**/: 530px; // IE6/win does not parse this sentence, so IE6/win still thinks that the width value is 300px; when ie5.x/win reads this sentence, the new value (400px) overwrites the old one because! Important flag does not work for them
}
HTML> body # Content {// html> body is written in css2.
Width: 500px; // the browser that supports css2 is lucky enough to read this sentence.
} <! -- [If LTE IE6]>
# Content {
Width: 530px
}
<[! Endif] -->
Here is a box of width: 500px; margin: 10px; padding: 10px; Border: 10px;, ie5.x win resolution is not normal.
The IE6 box model is backward compatible with previous errors. In fact, IE6 has two cores, and he still shows tolerance for errors before the old pages, only by strictly adding the doctype declaration in the document can IE6 accept the correct box-model. Therefore, hack must be consistent with the correct doctype.
Can work normally only when included in the document.

Note: Both IE and standard browsers (such as ff) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;