ZT: Compatibility-related features of IE6, IE7, and FF when designing DIV CSS_html/css

ZT: Compatibility-related features of IE6, IE7, and FF when designing DIV CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:29:51

Original

901 people have browsed it

When designing a website, you should pay attention to the compatibility of CSS styles with different browsers. Especially for websites designed entirely using DIV CSS, you should pay more attention to the compatibility of IE6 IE7 FF with CSS styles, otherwise , your network chaos may cause unwanted effects!
Height common to all browsers: 100px;
IE6-specific_height: 100px;
IE6-specific*height: 100px;
IE7-specific* height: 100px;
IE7 and FF shared height: 100px !important;
1. CSS compatibility
The following two methods can solve almost all compatibility issues today.
1, !important (not very recommended, use the following one which feels safest)
Whatever With IE7's support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)
Code:

2, IE6/IE77 vs. FireFox
*html and *html are IE-specific tags, which are not supported by firefox. And *html is a IE7-specific tag.
Code:

Note:
* To be compatible with IE7, html must ensure the following statement at the top of the HTML:
Code:

2. Universal float closure (very important!) Yes Use this to solve the problem of incorrect spacing when aligning multiple divs.
For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS and add classes to the divs that need to be closed. =”clearfix” That’s it, it works every time.
Code:

3. Other compatibility tips (quite useful)
1. Setting padding on a div under FF will cause the width and height to increase, but IE will not. (can be solved with !important)
2. Centering problem.
1). Vertically centered. Set line-height to the same height as the current div, and then pass vetical-align: middle. (Be careful not to wrap the content.)
2). Horizontally centered. Margin: 0 auto; (of course not omnipotent)
3. If you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags)
4. The difference in understanding of BOX between FF and IE leads to The difference of 2px also includes issues such as the margin of a div set to float doubling under IE.
5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common (for navigation tags and content lists)
6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve height adaptation.
7. Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:
Compatible code: Compatible with the most recommended mode.
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right : 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
* html . submitbutton {
margin-top: 21px;
}
What is browser compatibility: When we use different browsers (Firefox IE7 IE6) to access the same website or page, some differences will appear. Regarding compatibility issues, some are displayed normally and some are displayed abnormally. We will be very annoyed when writing CSS. We just fixed the problem of this browser, but another browser has a new problem. Compatibility is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe!
The compatibility of the IE7 browser recently released by Microsoft has indeed placed a heavy burden on some web page producers. Although IE7 has become standardized, it still has many differences from FF, so the compatibility of IE7 needs to be used. Many friends have asked what the compatibility of IE7 is, but I actually don’t know. I haven't found any compatibility specifically for IE7 yet. In addition to the previous article, the compatibility method in "CSS Style for Firefox IE6 IE7" is also very useful.
Anyone with a little bit of logical thinking will know that you can use the compatibility of IE and FF together. Here are three compatibility options, for example: (Suitable for novices, haha, experts will stop by here.)
Program code
The first one is compatible with IE FF and is common to all browsers (it is not actually compatible)
height:100px;
The second one is compatible with IE6 only
_height:100px;
The third one is compatible with IE6 and IE7.
*height:100px;
Now that the three are compatible, let’s take a look at how to define IE6 IE7 for each attribute in a style. FF-specific compatibility, look at the code below, the order cannot be wrong:
Program code
height:100px;
*height:120px;
_height:150px;
Let me explain briefly below How do browsers understand these three attributes:
Under FF, the second and third attributes are not recognized by FF, so it reads height:100px;
Under IE7, the third attribute is not recognized by IE7 , so it reads the first and second attributes, and because the second attribute covers the first attribute, IE7 finally reads the second attribute *height:120px;
Under IE6, three attributes IE6 knows them all, so all three properties can be read. And because the third property overwrites the first two properties, IE6 finally reads the third property.
1 CSS styles for firefox ie6 ie7
Now most of them are compatible with !important. For ie6 and firefox tests, they can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required. ! I found a good compatibility method for IE7 by using "* html". Now browse it with IE7. There should be no problem. Now write a CSS like this:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE*/

Then the font color is displayed in firefox For #333, the font color is displayed as #666 under IE6 and #999 under IE7.
2 Centering issues in css layout
The main style definitions are 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.
But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " when setting the child element definition
It should be noted that if you want to use this method to center the entire page, it is recommended not to Set in a DIV, you can split out multiple divs in sequence, just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.
3 different interpretations of the box model.
#box{
width:600px;
//for ie6.0- width: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 generated by floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //This situation Below IE will generate a distance of 200px display:inline; //ignore floating}
Let’s talk about the two elements block and inline in detail. The characteristics of the Block element are: always start on a new line, height, width, Line height and margins can be controlled (block elements); the characteristics of Inline elements are: on the same line as other elements,... cannot be controlled (inline elements);
#box{ display:block; //can be Inline elements are simulated as block elements display:inline; //Achieve the effect of being arranged in the same row

iplay:table;

5 Problems with IE and width and height
IE does not recognize it min-This definition, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 Minimum width of the page
min-width is a very convenient CSS command. It can specify that the element must be at least not less than a certain width, so as to ensure that the layout is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a

under the tag, and then specify a class for the div:
Then the 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 in line 2 uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

7 Clear floating
. Compatible box{
display:table;
//Display the object as a block element-level table
}
or
. Compatible box{
clear:both;
}
Or add: after (pseudo object) to set the content that occurs after the object. It is usually used in conjunction with content. IE does not support this pseudo object and is not an Ie browser. Supported, so it does not affect IE/WIN browsers.