Make Your webpage compatible with FireFox and IE, And the webpage compatible with firefoxie

Make Your webpage compatible with FireFox and IE, And the webpage compatible with firefoxie

CSS compatibility highlights: DOCTYPE affects CSS Processing

FireFox: When div is set to margin-left and margin-right is set to auto, it is already centered. IE is not working.

When setting text-align for FireFox: body, you must set margin: auto (mainly margin-left, margin-right) for the div to be centered.

FireFox: After padding is set, the div will increase the height and width, but IE will not, so you need to use it! Important has one more height and width.

FireFox: supported! Important, IE is ignored, available! Important sets a special style for FireFoxFF.

Div vertical center problem: 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 in ie ff at the same time, and hand can only be IE.

FireFox: 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 in menubar.

There are many advantages 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, you can find it in other provinces.

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 the two margin cannot be reversed. It is said that! The important attribute IE cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

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:

Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}

I don't know what/**/www.100sucai.com is. I only know that both IE5 and firefox support this, but IE6 does not. If anyone understands this, please let me know. Thank you! :)

3. ul labels have padding values by default in Mozilla, while in IE, only margin has values. Therefore, we should first define:

Ul {margin: 0; padding: 0 ;}

Most problems can be solved.

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

<Script type = "text/javascript">

You can.

5. If you set the direction of float and text-align in the BOX container to the same:

{Float: left; text-align: left; margin: 0 0 200px ;}

We can make the following changes:

{Float: left; text-align: left; margin: 0 0 0 200px; display: inline ;}