Firefox IE6 IE7 css compatibility

IE6, IE7:

Display: inline;

IE is not compatible with Firefox! ImpOrtant

CSS hack: differentiate IE6, IE7, and firefox
Difference between different browsers, CSS hack writing:
Difference between IE6 and FF:
  Backgroundrange; * background: blue;

Difference between IE6 and IE7:
  Background: green! ImpOrtant; background: blue;

Difference between IE7 and FF:
  Backgroundrange; * background: green;

Difference FF, IE7, IE6:
  Backgroundrange; * background: green! ImpOrtant; * background: blue;

Note: Both IE and standard browsers (such as FF) cannot recognize *;
IE6 can recognize *, but cannot recognize it! ImpOrtant,
IE7 can recognize * and can also recognize! ImpOrtant;
FF cannot recognize *, but can recognize it! ImpOrtant;

Firefox IE6 IE7 CSS compatibility Solution

 

1. DOCTYPE affects CSS Processing 2. FF: When div sets margin-left and margin-right to auto, it is already centered, and IE does not work. 3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-right) for the div to be centered. 4. FF: After padding is set, the div will increase the height and width, but IE will not, so you need to use it! ImpOrtant has one more height and width. 5. FF: supported! ImpOrtant and IE are ignored and available! ImpOrtant sets a special style for FF 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 the vertical center. The disadvantage is that you need to control the content rather than line feed. 7. cursor: pointer can display the cursor finger in ie ff at the same time. hand can only be IE 8. FF: adds a border and a background color to the link. You must 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 menubar. 9. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! ImpOrtant; margin: 28px;} note that the order of the two margin cannot be reversed! ImpThe IE ant attribute IE cannot be identified, but other browsers can. Therefore, in IE, it is actually interpreted as follows: If div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: XXpx! ImpOrtant; 11. ul labels have padding values by default in Mozilla, and only margin has a value in IE. Therefore, ul {margin: 0; padding: 0;} can be defined first to solve most problems. Note: 1. The div of float must be closed. For example: (floatA and floatB attributes have been set to float: left;) <# div id = "floatA"> <# Div id = "floatB"> <# Div id = "NOTfloatC"> the NOTfloatC here does not want to continue translation, but wants to move down. 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. In the <# div class = "floatB"> <# Div class = "NOTfloatC"> Add <# div class = "clear"> This div must pay attention to the declaration position and be placed in the most appropriate place, it must be at the same level as the two div with the float attribute. No nested relationship exists between them; otherwise, an exception occurs. And define the clear style as follows:. clear { Clear: both;} In addition, overflow: hidden should be added to wrapper to automatically adapt the height; When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility. For example, a wrapper is defined as follows:. colwrapper { Overflow: hidden; Zoom: 1; Margin: 5px auto ;} 2. margin doubling Problem The div set to float doubles the margin set in ie. This is a bug in ie6. The solution is to add the display: inline In the div; For example: <# Div id = "imfloat"> The corresponding css is # IamFloat { Float: left; Margin: 5px; Display: inline ;} 3. Container inclusion relationships In many cases, especially when the container has a parallel layout, such as 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. 4. Questions about height If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on) 5. the most cruel means -! ImpOrtant; If there is no way to solve some detailed problems, you can use this method. FF "! ImpOrtant will automatically give priority to resolution, while IE will ignore. tabd1 { Background: url (/res/images/up/tab1.gif) no-repeat 0px 0px! ImpOrtant; Background: url (/res/images/up/tab1.gif) no-repeat 1px 0px;} It is worth noting that you must set xxxx! ImpThe ortant sentence is placed on the other sentence, which has been mentioned above When IE7.0 came out, there were new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the problem of IE7.0 compatibility, I found the following article: I use 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 and used "* + html". Now I can use IE7 to browse it. It should be okay. You can write a CSS file as follows: # Example {color: #333 ;} * Html # example {color: #666 ;} * + Html # example {color: #999 ;} The font color in firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999. CSS compatibility with various browsers is already a common issue, and tutorials on the Internet are everywhere. The following content is not too novel. It is a personal summary and I hope it will be helpful for beginners. I. CSS HACK The following two methods can solve almost all today's HACK. 1 ,! ImpOrtant With IE7! ImpOrtant support ,! ImpCurrently, the ortant method is only for the HACK of IE6. (note the writing method. Remember that the declaration position must be in advance .) 2, IE6/IE77 for FireFox * + Html and * html are unique tags of IE, which are not supported by firefox at the moment. * + html is also a unique tag of IE7. Note: * + The html HACK for IE7 must ensure that the following statements are made on the top of the HTML: 2. Universal float Closure For details about the principle of clear float, refer To [How To Clear Floats Without Structural Markup] Add the following code to Global CSS and add class = "clearfix" to the div to be closed. Iii. Other compatibility skills 1. Setting padding for div under FF will increase the width and height, but IE will not. (available! ImpOrtant solution) 2. center problem. 1). vertical center. Set line-height to the same height of the current div, and then use vertical-align: middle. (Note that do not wrap the content .) 2). horizontal center. margin: 0 auto; (of course not omnipotent) 3. To add a style to the content of tag a, set display: block) 4. The difference between FF and IE in understanding BOX leads to the 2px difference. There are also issues such as div set to float and margin doubling under ie. 5. ul labels are listed-style and padding by default under FF. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists) 6. Do not set the height of the external wrapper div. It is best to add overflow: hidden to achieve highly adaptive. 7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE. 1. css style for firefox ie6 ie7 Most of them are used now! ImpOrtant comes to hack and can be displayed normally for ie6 and firefox tests, But ie7! ImpOrtant can be correctly explained, and the page will not be displayed as required! Find a needle The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay. You can write a CSS file as follows: #1 {color: #333 ;} * Html #1 {color: #666 ;} * + Html #1 {color: #999 ;} The font color in firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999. 2. center problem in css layout The main style definition is as follows: Body {TEXT-ALIGN: center ;} # Center {MARGIN-RIGHT: auto; MARGIN-LEFT: auto ;} Note: First, define TEXT-ALIGN: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough. However, it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto; MARGIN-LEFT: auto;" when the sub-element is defined ;" It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one DIV. You can split multiple divs in sequence, You only need to define MARGIN-RIGHT: auto; MARGIN-LEFT: auto; in each split div. 3 different explanations of the Box Model # Box {width: 600px; // for ie6.0-w \ idth: 500px; // for ff + ie6.0} # Box {width: 600px! ImpOrtant // for ff width: 600px; // for ff + ie6.0 width: 500px; // for ie6.0 -} 4. Double distance of floating ie # Box {float: left; width: 100px; margin: 0 0 0 100px; // in this case, IE will generate a PX distance display: inline; // ignore floating} Here, let's take a closer look at the block and inline elements. The characteristics of the Block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the characteristics of the Inline element are: on the same line as other elements ,... Uncontrollable (embedded element ); # Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: table; IE does not recognize the min-definition, but in fact it treats normal width and height as min conditions. In this case, the problem is big. If only the width and height are used, In a normal browser, these two values will not change. If only min-width and min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is important. To solve this problem, you can: # Box {width: 80px; height: 35px;} html> body # box {width: auto; height: auto; min-width: 80px; min-height: 35px ;} 6. Minimum page width Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, In fact, it uses width as the minimum width. To enable this command to be used on IE, you can Put it under the tag and specify a class for the div: Then CSS is designed like this: # Container {min-width: 600px; width: exprEssion (document. body. clientWidth <600? "600px": "auto ");} The first min-width is normal, but the width of row 2nd uses JavasSorry, this is only recognized by IE, and it will make your HTML document not formal. It actually uses JavasTo realize the minimum width. 7. Clear floating . Hackbox {display: table; // display the object as a block element-Level table} Or. hackbox {clear: both ;} Or add: after (pseudo object) to set the content after the object, which is usually used with content. IE does not support this pseudo object, not supported by Ie browsers, So it does not affect IE/WIN browsers. This is the most troublesome ...... # box: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;} 8 DIV floating IE text produces 3 pixel bug The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left. # Box {float: left; width: 800px; }# left {float: left; width: 50% ;}# right {width: 50% ;} * html # left {margin-right:-3px; // This sentence is critical} HTML code 9 attribute selector (this is incompatible and is a bug in hiding css) P [id] {} div [id] {} This is hidden for versions earlier than IE6.0 and IE6.0. It is used by FF and OPera. There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in p [id, all p tags have IDs in the same style. 10 Internet Explorer When the div application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue. Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible. 11 highly unsuitable The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses Margin or paddign. Example: Content in object p CSS: # box {background-color: # eee ;} # Box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;} Solution: Add two empty div objects to the upper and lower sides of the P object. CSS code:. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV. Vi. CSS compatibility Key Points Analysis IE vs FF Key Points of CSS compatibility: DOCTYPE affects CSS Processing FF: When div sets margin-left and margin-right to auto, it is already centered, and IE is not working. FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-right) for the div to be centered. FF: After padding is set, the div will increase the height and width, but IE will not, so we need to use it! ImpOrtant has one more height and width. FF: Yes! ImpOrtant and IE are ignored and available! ImpOrtant sets a special style for FF 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 the vertical center. The disadvantage is that you need to control the content rather than line feed. Cursor: pointer can display the cursor finger shape in ie ff at the same time, hand only IE Can FF: adds a border and a background color to the link. You must 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 XHTML + CSS compatibility solution small set in menubar. There are many advantages to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write down some of my problems below, search for the province ^ 1. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. solution: Div {margin: 30px! ImpOrtant; margin: 28px ;} Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! ImpThe IE ant attribute IE cannot be identified, but other browsers can. So in IE, it is actually explained as follows: Div {maring: 30px; margin: 28px} If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: XXpx! ImpOrtant; 2. The BOX interpretations of IE5 and IE6 are inconsistent. In IE5, The div {width: 300px; margin: 0 10px 0 10px;} The div width is interpreted as 300px-10px (right filling) -10px (left filled) the final div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, we can make the following changes: Div {width: 300px! ImpOrtant; width: 340px; margin: 0 10px 0 10px} I don't quite understand what this is. I only know that both IE5 and firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :) 3. ul labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first. Ul {margin: 0; padding: 0 ;} Most problems can be solved. 4. For scripts, the language attribute is not supported in xhtml1.1. You only need to change the code <Type = "text/java"> You can. 7. 10 CSS skills you may not know 1. Simplified CSS font attributes In general, CSS is used to set the font attributes as follows: Font-weight: bold; Font-style: italic; Font-varient: small-caps; Font-size: 1em; Line-height: 1.5em; Font-family: verdana, sans-serif; But you can also write all of them to one line: Font: bold italic small-caps 1em/1.5em verdana, sans-serif; Really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted. 2. Use both classes Generally, only one Class can be set for one element, but this does not mean that two classes cannot be used. In fact, you can: ... At the same time, two classes are given to the P element, with an empty lattice in the middle. In this way, the attributes of all the text and side classes will be added to the P element. If the attributes of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect. Supplement: for an ID, it cannot be written like this ... Nor can it be written like this. 3. Default Value of CSS border You can usually set the border color, width, and style, such: Border: 3px solid #000 The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here. If only the style is specified, the default value is used for other attributes. Generally, the default width of Border is medium, which is generally 3 to 4 pixels. The default color is the text color. If this value is correct, you don't need to set that much. 4. CSS for document printing Many websites have a printing version, but this is not actually required, because you can use CSS to set the printing style. That is to say, you can specify two CSS files for the page, one for screen display and the other for printing: 1st rows are displayed, and 2nd rows are printed. Pay attention to the media attributes. But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, you can set this CSS to display CSS to check its effect. Maybe you will use the "display: none" command to turn off some decorative images and then turn off some navigation buttons. For more information, see "Print differences. 5. Image replacement skills This is certainly acceptable, but for search engines, they are less interested in replacing text in alt than normal text, because many designers put a lot of keywords here to cheat the search engine. The method should be as follows: Buy widgets However, there is no special font. To achieve the same effect, you can design CSS as follows: H1 {background: url (/blog/widget-image.gif) no-repeat; height: image height text-indent:-2000px} Change the image height to the actual image height. Here, the image is displayed as a background, and the real text is Indented by setting-2000 pixels. They will appear at 2000 on the left of the screen and will not be seen. However, this may not be visible to anyone who closes the image. 6. Another adjustment technique for the CSS box Model The Box model is adjusted mainly for IE browser before IE6. They calculate the boundary width and blank space on the element width. For example: # Box {width: 100px; border: 5px; padding: 20px} Call it like this: ... At this time, the full width of the box should be 150 points, which is correct in all browsers except IE6. However, in a browser like IE5, its full width is still 100 points. The Box adjustment method invented by the predecessors can be used to deal with this difference. However, CSS can achieve the same purpose to make them display the same effect. # Box {width: 150px} # box div {border: 5px; padding: 20px} Call this method as follows: ... In this way, no matter what browser, the width will be 150 points. 7. Align block elements in the center If you want to build a fixed-width webpage and make the webpage horizontally centered, it is usually like this: # Content {width: 700px; margin: 0 auto} You will use To enclose all elements. This is very simple, but it is not good enough. This effect will not be displayed in earlier versions of IE6. Change CSS as follows: Body {text-align: center }# content {text-align: left; width: 700px; margin: 0 auto} This will center the webpage Content, so the Content is added Text-align: left. 8. Use CSS to process Vertical Alignment Vertical alignment can be easily implemented using tables. You can set the table unit vertical-align: middle. But this is useless for CSS. This attribute is useless if you want to set a navigation bar to 2 em and center the navigation text vertically. What is the CSS method? By the way, set the Row height of the text to 2em: line-height: 2em. 9. Position CSS in the container One advantage of CSS is that one element can be located at any time in a container. For example, for this container: # Container {position: relative} In this way, all elements in the container are relatively located, and can be used as follows: ... If you want to locate at 30 to the left and 5 to the top, you can do this: # Navigation {position: absolute; left: 30px; top: 5px} Of course, you can also do this: Margin: 5px 0 0 30px Note that the order of the four numbers is: Top, right, bottom, left. Of course, sometimes the positioning method is better than the margin method. 10. Background Color directed to the bottom of the screen CSS cannot control the vertical direction. If you want to direct the navigation bar to the bottom of the page like the content bar, It is very convenient to use a table, but if you only use this CSS: # Navigation {background: blue; width: 150px} A shorter navigation bar will not go straight to the bottom, and it will end when the half-way content ends. What should I do? Unfortunately, you can only use spoofing to add a background image to the shorter column. The width is the same as the column width, and the color is the same as the Set background color. Body {background: url (/blog/blue-image.gif) 0 0 repeat-y} In this case, em cannot be used as the unit, because in this case, once the reader changes the font size, this trick will reveal the filling, and only px can be used. ------------------