Shulou(Shulou.com)06/02 Report--

This article to share with you is about the common IE and Firefox CSS compatibility problems, Xiaobian think quite practical, so share to everyone to learn, I hope you can read this article after some harvest, not much to say, follow Xiaobian to see it.

To introduce IE and Firefox CSS compatibility problem solution, in the distinction between Firefox and IE when the most commonly used is! Important methods, there are also some ways to distinguish compatibility between different browsers and different versions of browsers, such as:@import, comments, attribute selectors, sub-object selectors and voice-family methods.

Here are the CSS compatibility issues for IE and Firefox

DOCTYPE affects CSS processing

2.FF(Firefox):DIV is centered when margin-left,margin-right is auto,IE does not work

3.FF(Firefox):body When text-align is set, margin:auto(mainly margin-left,margin-right) is required for DIV to be centered

4.FF(Firefox): After setting padding,DIV will increase height and width, but IE will not, so you need to use! important Set a height and width

5.FF(Firefox): Support! important,IE ignored, available! important for FF(Firefox) special settings style, it is worth noting that, be sure to xxxx! This sentence is placed above another sentence.

6. Vertical centering of the DIV:vertical-align:middle; increase the line spacing to the same height as the entire DIV line-height:200px; then insert the text and it will be vertically centered. The disadvantage is that you have to control the content and not change the line.

7.cursor:pointer can also display cursor fingers in IEFF(Firefox), hand only IE can

8.FF(Firefox): Add border and background color to links, set display:block, and set float:left to ensure no line breaks. Refer to menubar, the height of a and menubar is set to avoid misplacement of the bottom edge, if not set height, you can insert a space in menubar.

9. The BOX model in mozillafirefox and IE is explained differently resulting in a difference of 2px.

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

Note that the order of these two margins must not be written in reverse, according to Ah Chieh! Important This attribute is not recognized by IE, but other browsers can recognize it. So in IE, it actually translates into this:

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

Repeat the definition of words according to *** one to execute, so you can not just write margin:XXpx! important;

10. Box interpretation of IE5 and IE6 is inconsistent

IE5 Down

DIV{width:300px;margin:010px010px;}

The width of a DIV is interpreted as 300px-10px (right padding)-10px(left padding), resulting in a DIV width of 280px, whereas on IE6 and other browsers the width is calculated as 300px +10px (right padding)+10px (left padding)= 320px. At this point we can make the following modifications

DIV{width:300px! important;width/** /:340px;margin:010px010px}

11.ul tags have padding values by default in Mozilla, but only margin has values in IE, so defining ul{margin:0;padding:0;} first can solve most problems

The above is what are the common IE and Firefox CSS compatibility problems, Xiaobian believes that some knowledge points may be seen or used in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.