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

In this issue, the editor will bring you about the difference and compatibility between IE6,IE7 and FF Firefox. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

The difference and compatibility between IE6,IE7 and FF Firefox

Compared with IE6, 1.IE7 has more than 200 improvements, but they are all implemented under StrictMode, that is, declaring DocType as XHTMLTransitional,XHTMLStrict at the beginning of the page. Under QuirksMode, IE7 is no different from IE6. So for better compatibility, declare DocType as far as possible and use StrictMode for production.

2.IE7 supports Alpha channel PNG images, but these Alpha channel images still can not be displayed properly under IE6, so try to use transparent GIF images.

The 3.IE7 box model has changed: the box uses the default value of "visible" for "overflow", so when the size of the child element is larger than the size of the parent element, IE7 will expose the child element outside the parent element like Firefox, rather than expanding the parent element to include the child element as IE6 does. Just set the page to "overflow:visible".

4. Div set to float doubles the margin set under ie. This is a bug where ie6 exists. The solution is to add "display:inline" to the div.

5.IE and Firefox have different definitions of 'width'':

In Firefox: width occupied by container = content width + padding width + border width

In IE: content width = container width you defined (InternetExplorer'width')-padding width-border width

(InternetExplorer'width' refers to the width of the entire container, including content, padding,border)

Centering of 6.css layout: if margin-left,margin-right is set to auto in FF Firefox, IE should be set to body {TEXT-ALIGN:center;}.

When 7.FF Firefox sets padding, div will add height and width, but IE will not, so you need to use! important set up an extra height and width

8. Inconsistent interpretation of the BOX model in mozillafirefox and IE leads to a difference in 2px solution: div {marginal Vega 30px importante marginal Vega 28px;}

9.ul tags have a padding value by default in FF Firefox, while only margin has a value in IE, so define ul {margin:0;padding:0;} first.

10. The final solution:

(1)! important:FF Firefox and IE7 will automatically give priority to parsing "! important", while IE6 will ignore it. Available! important sets styles for FF Firefox and IE7 separately, which does not affect the display of IE6. It is worth noting that the sentence xxxxxexamples should be placed on top of another sentence.

Example: div {marginal margin:30px 30pximport importantposition 15px;} / / margin:30px in FF Firefox and IE7, margin:15px in IE6

(2) because both FF Firefox and IE7 support "! important", and there are differences between them, sometimes there are some minor problems. "* + html" can be used for IE7.

Example

: # example {color:#333;} / * FF Firefox font color is displayed as # 333font / * html#example {color:#666;} / * IE6 font color is displayed as # 666font / * + html#example {color:#999 } / * the font color is displayed as # 999colors under IE7 / the above is the difference and compatibility between IE6,IE7 and FF Firefox shared by Xiaobian. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to 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.