Skills for IE and ff css compatibility and browser compatibility 2

CSS compatibility issues between IE and Firefox <br/> CSS has a high value for browser compatibility. In general, there is a great difference in resolution between IE and Firefox, here we will introduce the compatibility points. <Br/> 1. The doctype affects CSS processing. <br/> 2. FF: The DIV is centered when margin-left and margin-right is set to auto, IE does not work <br/> 3. When FF: body is set to text-align, The DIV must be set to margin: auto (mainly margin-left and margin-right) can be centered <br/> 4. FF: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set the height and width of important. <br/> 5. FF: supported! Important, ie is ignored, available! Important sets a special style for ff. It is worth noting that you must set XXXX! Important is placed on the other sentence <br/> 6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-height: 200px; then insert the text to center vertically. The disadvantage is that do not wrap the content <br/> 7. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be Ie <br/> 8. FF: add the border and background color to the link. 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 </P> <p> menubar. <Br/> 9. The box models in Mozilla Firefox and IE are inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px ;}< br/> note that the order of the two margin must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. Therefore, in IE, it is actually interpreted as follows: div {maring: 30px; margin: 28px} <br/> if the definition is repeated, it is executed according to the last one. Therefore, you cannot write only margin: xxpx! Important; <br/> 10. The box interpretations of ie5 and IE6 are inconsistent. <br/> Div {width: 300px under ie5; margin: 0 10px 0 10px ;} <br/> the DIV width is interpreted as 300px-10px (right fill)-10px (left fill) and the final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can make the following changes </P> <p> Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px} <br/> 11. The ul tag has a padding value by default in Mozilla, in IE, only margin has a value. Therefore, UL {margin: 0; padding: 0;} is defined first ;} </P> <p> most problems can be solved. <br/> Note: <br/> 1. The DIV of float must be closed. <Br/> For example: (floata and floatb have been set to float: Left ;) <# Div id =/"floata/"> <br/> <# Div id =/"floatb/"> <br/> <# Div id =/"notfloatc /"> <br/> notfloatc does not want to continue translation, instead, we want to move it down. <Br/> This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed. <Br/> Add <# Div class =/"floatb/"> <br/> <# Div class =/"notfloatc/"> <br/> <# Div class =/"clear/"> <br/> This Div must pay attention to the declared position, it must be placed in the most appropriate place and must be at the same level as the two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception will occur. <Br/> and define the clear style as follows :. clear {clear: Both ;}< br/> In addition, to automatically adapt to the height, overflow: hidden should be added to wrapper; <br/> when a box containing float is automatically adapted to IE, it is invalid. In this case, the layout private attribute of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility. <Br/> for example, a wrapper is defined as follows :. colwrapper {<br/> overflow: hidden; <br/> ZOOM: 1; <br/> margin: 5px auto ;} </P> <p> 2. Margin doubles. <Br/> Div set to float doubles the margin set in IE. This is a bug in IE6. <Br/> the solution is to add display: inline to the Div. <br/> example: <br/> <# Div id =/"imfloat/"> <br/> the corresponding CSS is <br/> # iamfloat {<br/> float: left; <br/> margin: 5px;/* 10 Px in IE */<br/> display: inline; </P> <p> 3. Container inclusion relationship <br/> In/* IE, especially the parallel layout in the container, for example, when there are two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision. </P> <p> 4. Questions about height <br/> it is best not to define the height if the content is dynamically added. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not automatically open down, do not know what is going on) </P> <p> 5. the most cruel means -! Important; <br/> if you cannot solve some details, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore. tabd1 {<br/> Background: URL (/RES/images/up/tab1.gif) No-repeat 0px! Important;/* style for FF */<br/> Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px; /* style for IE */} <br/> it is worth noting that the XXXX! Important is placed on the other sentence, which has already been mentioned above; </P> <p> ie7.0 has come out, and there are new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the ie7.0 compatibility problem, I found the following article: <br/> I am using most of them now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! After searching, I found a good hack Method for IE7, which is to use </P> <p> "* + html". Now I can use IE7 to browse it. It should be okay. <Br/> you can write a CSS file as follows: <br/> # example {color: #333;}/* Moz */<br/> * html # example {color: #666;}/* IE6 */<br/> * + html # example {color: #999 ;} /* IE7 */<br/> the font color displayed in Firefox is #333, the font color displayed in IE6 is #666, And the font color displayed in IE7 is #999, they do not interfere with each other. </P> <p> first, let's review the cracking of IE's box-model. <br/> the notorious bug of IE box-model exists in each of IE6/Win's previous version, this bug was not tested until tantak released the most widely used hack. <br/> ie5.x/win has the same resolution on the box-model, they think that width includes border and padding ), fortunately, this situation has improved in IE6. <br/> however, IE6 is backward compatible with the previous mistakes. IE6 actually has two cores, he still showed tolerance for errors before the old page, only by adding the document type (doctype) Statement strictly in the document, IE6 can accept the correct box-Model <br/> SO, the hack of tantak must be included in the document with the correct doctype. </P> <p> quote <br/> Div. content {<br/> width: 4 00px; // This is the incorrect width. all browsers read <br/> voice-family :"/"}/""; // ie5.x/win ignores the content after "/"}/"<br/> voice-family: Inherit; <br/> width: 300px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old <br/>}< br/> HTML> body. content {// html> body is written in css2 <br/> width: 300px; // The browser that supports css2 is lucky enough to read this sentence <br/>}< br/> now back to the topic, which we often see! Important and (Space)/**/: used together. What are the mysteries of this writing? </P> <p> let's take a look at the method just now. Here we can provide another method to achieve this effect. <br/> quote <br/> Div. content {<br/> width: 300px! Important; // This is the correct width, most of which are supported! The important-tagged browser uses the value <br/> width (Space)/**/: 400px; // IE6/win does not parse this sentence, therefore, IE6/win still thinks that the width value is 300px. When ie5.x/win reads this sentence, the new value (400px) overwrites the old one because! Important tag does not work for them <br/>}< br/> HTML> body. content {// html> body is written in css2 <br/> width: 300px; // The browser that supports css2 has the honor to read this sentence <br/>}< br/> Similarly, this method still must rely on the correct document type declaration to work properly, the reason has been mentioned before. <Br/> the document type declaration is like a switch. If backward compatibility is enabled, a Pandora box is used incorrectly. </P> <p> ie7.0 is available, whether or not he is more advanced than ie6.0, IE7 and IE6 are incompatible, and there is no doubt new pain points are introduced, at least in the debugging process, there is another program and a large number of incompatibility problems. <Br/> at present, there are still a few users using ie7.0, and ie6.0 accounts for a large proportion of users. However, a large number of web pages tested by IE6 are not displayed properly in ie7.0. <Br/> according to ie7.0, <br/> ie7.0 introduced the strict mode based on IE6, including many improvements to the parsing and presentation of Cascading Style Sheets (CSS. These improvements are intended to improve the consistency of the stacked style sheet interpreted by Internet Explorer to meet W3C recommendation standards, and provide a set of functionality that can be relied upon by the initiator </P> <p>. <Br/> no matter how beautiful the official language is, whether ie7.0 is really W3C or not, there are too many personalized things and too many differences between browsers, which makes us helpless. The web page displayed under IE6 is almost unsightly under ie7.0. Therefore, when we design the webpage, while solving the compatibility problem between ie6.0 and Firefox, we are more compliant with W3C ie7.0, or compromise on ie6.0 of 96%? This problem is actually a bit redundant. What we can do is perhaps the moderate choice. We only need to try to debug it to </P> <p> make sure all browsers are normal. <Br/> ie7.0 and ie6.0 are incompatible. Currently, I know the following aspects. If any omissions or errors occur, please add or correct them later. </P> <p> 1. IE7, IE6 Div + CSS have different width definitions <br/> the width definitions have different interpretations. IE7 width must be wider than IE6 ,, this is the reason why the webpage may have an overflow problem. Fortunately, you can change the value or change the percentage. </P> <p> 2. ie7.0 fixed! Important bug. <Br/> previously due to ie6.0 pair! Important identifies bugs. The box model interpretation in Firefox and IE is inconsistent, resulting in a 2px difference. Most Web Standard designers use this bug to be compatible with ie6.0 and Firefox, that is, using: div {margin: 30px! </P> <p> important; margin: 28px ;}. However, ie7.0 fixed this bug, so the problem emerged again. How can I be compatible with ie.7.0 and ie6.0 and Firefox? </P> <p> 3. Change of Box Model <br/> In IE7, overflow behavior is modified to adapt to css2.1 box model. </P> <p> 4. some CSS filters in ie7.0 will no longer be available <br/> IE7 has modified many potential parsing errors, which may prevent filters from working properly in earlier ie versions. For example, * HTML filter, underline filter, And/*/comment filter. </P> <p> 5. ie7.0 does not support many nonstandard CSS statements and has stricter requirements on JS syntax. <Br/> many JS pages normally displayed in IE6 cannot be displayed normally in IE7, and no error is prompted. Ie7.0 has stricter requirements on JS syntax, but this specification does not seem to be explained and I have not clearly told you, how are they "rules" and "</P> <p> fan. </P> <p>