Make your webpage compatible with both FireFox and IE_html/css

CSS compatibility points: DOCTYPE affects CSS processing

FireFox: div is already centered when margin-left and margin-right are set to auto, but IE does not work.

FireFox: When body sets text-align, div needs to set margin: auto (mainly margin-left, margin-right) to be centered.

FireFox: After setting padding, the div will increase height and width, but IE will not, so you need to use !important to set an additional height and width.

FireFox: Supports !important, IE ignores it, you can use !important to set styles specifically for FireFoxFF.

Problem with div vertical centering: vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text and it will be vertically centered. The disadvantage is that the content must be controlled not to wrap.

Cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be displayed in IE.

FireFox: To add a border and background color to the link, you need to set display: block and float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.

There are many benefits to using XHTML+CSS framework, but there are also some problems. Whether it is due to unskilled use or unclear thinking, I will first write down some of the problems I encountered below to save everyone from searching around. .

1. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution:

div{margin:30px!important;margin:28px;}

Note that the order of these two margins must not be reversed. It is said that the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:

div{maring:30px;margin:28px}

If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;

2. The BOX interpretation of IE5 and IE6 is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;}under IE5 will be interpreted as 300px-10px (right padding)-10px (left Padding) The final width of the div is 280px, while on IE6 and other browsers the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications:

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

About this/**/ What is www.100sucai.com? I don’t quite understand it. I only know that IE5 and firefox support it. But IE6 does not support it. If anyone understands it, please let me know. Thanks! :)

3. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define it first:

ul{margin:0;padding:0; }

can solve most problems.

4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to:

Make your webpage compatible with both FireFox and IE_html/css_WEB-ITnose