The CSS difference between Firefox browser and IE

the CSS difference between IE and Firefox browser

1, IE6.0 div Embedded Div can be the parent of the height of the large, and Firefox can not, to set their own height.

2, when set to three column layout, IE6.0 float width can not reach 100%, and Firefox can. Both browsers are available when the layout is set to two columns.

3, in the Firefox browser, not float the Div front has the same parent of float Div, this div if there is a background map, to use Clear:both to display the background map, and IE6.0 do not use Clear:both.

4, in [Text-decoration:underline] under the property, the IE6.0 display will be a little lower than Firefox. In Firefox, part of the stroke is about 1 pixels below the underline.

　Ievs Firefox browser

CSS Compatibility essentials:

DOCTYPE affect CSS Processing

Firefox: Div set margin-left,margin-right to auto when already centered, ie not

Firefox browser: When the body set text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) square can be centered

Firefox browser: Set padding, div will increase the height and width, but IE will not, it needs to use!important more set a height and width

Firefox browser: Support!important,ie is ignored, available!important for Firefox special settings style

The vertical center of the div problem: vertical-align:middle; increases the line spacing to the same height as the entire div line-height:200px; then inserts the text and centers it vertically. The disadvantage is to control the content do not change lines

Cursor:pointer can display cursor finger-like in iefirefox, hand only IE can

Firefox browser: links with border and background color, you need to set Display:block, while setting float:left guarantee do not wrap. Refer to MenuBar, to set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar

XHTML+CSS Compatibility Solution Small Set

The use of XHTML+CSS framework benefits a lot, but there are some problems, whether because of the use of unskilled or not clear thinking, I first put some of the problems I encountered in the following, the province of the people around to find.

1. In Mozillafirefox and IE, the box model explains inconsistencies resulting in a 2px resolution:

div{margin:30px!important;margin:28px;} Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in IE, in fact, explained that:

DIV{MARING:30PX;MARGIN:28PX} Repeat the definition followed by the last one, so you can not write only margin:xxpx!important;

2.ie5 and IE6 's box explain inconsistency IE5 under div{width:300px;margin:010px010px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated with 300px+10px (right padding) +10px (left padding) =320px. Then we can make the following modifications

div{width:300px!important;width:340px;margin:010px010px}.

3.UL tags in mozilla default is padding value, and in IE only margin have a value, so first define

ul{margin:0;padding:0;} We can solve most of the problems.

4. With regard to scripts, the language attribute is not supported in xhtml1.1, just change the code to

<scripttype= "Text/javascript" > It's okay.