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:

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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