The difference between Firefox and IE in CSS style sheets

A summary of some of the CSS in FF and IE under the difference! may not be complete, will be supplemented in the future.

Firefox:div set Margin-left, Margin-right is already centered when auto, IE not

Firefox:body set Text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

FireFox: 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: Support!important, IE is ignored, available!important for FireFox special settings style

The vertical center of the div problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines

Cursor:pointer can also display cursor finger shape in IE FireFox, hand only IE can

FireFox: 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 the XHTML+CSS framework is good, but there are some problems, whether it is because of the use of unskilled or unclear thinking, I will first put some of the problems I encountered in the following:

1. In Mozilla Firefox 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't just write margin:xxpx!important; web Teaching Network

2.ie5 and IE6 's box explain inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} 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 you can make the following modifications

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

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

<script type= "Text/javascript" >

Firefox:div set Margin-left, Margin-right is already centered when auto, IE not

Why not IE? div{width:100px;margin:0 Auto;} As Center

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

This is IE on the CSS box model interpretation of the problem caused, can only accommodate it web teaching network

Firefox: Support!important, IE is ignored, available!important for FireFox special settings style

IE7 is as compatible as!important.

Cursor:pointer can also display cursor finger shape in IE FireFox, hand only IE can

Pointer is the standard notation, hand is defined by the IE6 version.

Add:

IE6 has margin double patch bug, need to do CSS. hack

Firefox is more compliant and needs special attention in floating and clearing floats, and IE fault tolerance is better

IE in the height is less than a certain value (possibly 18px), may not be reflected on the page, need to Overflow:hidden, and Firefox can fully reflect the height;

Pack good IE6 IE7 ff2 roughly write a one or two page to know about the difference, in fact, not difficult

Screen IE browser (ie do not show)

Web Teaching Network

*:lang (en) Select {font:12px!important}/*ff Dedicated * *

Select:empty {font:12px!important}/*safari Visible * *

Here the Select is a selector and is replaced according to the situation. The second sentence is unique to the Safari browser on the Mac.