Nausea of CSS 2.0 in IE6 and 7

Our friends at the development front-end know that even if we use CSS2.0, there will still be many problems. To develop a well-compatible page, the IETester is always around us, it can help us test how our page looks like in various IE versions, and then it has some JS and CSS viewing functions. Therefore, the compatibility of a website needs to be adjusted for half a day now. It is common to repeat the appearance with IE, Firefox, and Chrome. Well, let's talk about my experience. I borrowed a CSS Mastery book from the library a long time ago. It was really good. Then I set foot on this tragic Web browser compatibility path.

 

　　I often encounter the following problems:

1. 3-pixel displacement: The old issue in IE6. When a div is replaced with a float element, when the div is not used, there is a three-pixel interval between the two divs. The solution is to float both of them, or manually adjust the floating div property margin-right/margin-left to-3px.
2. div height: in IE6, the height of the div is a layer with a height of around 12px, no matter how small it is, at this time, I usually set the line-height attribute to 0, and it will be normal. However, there are other solutions on the Internet. I have never used them. Let's test it by yourself: while defining the height value, we also define the font-size as 0, or define overflow as hidden.

3. overflow is not used. overflow of IE6 is only useful when both the height and width values of the element are set and display is block.

4. The font is not displayed: IE6/7. If the font-family is set to "", no effect is displayed. In this case, "Microsoft YaHei" may solve this problem.

5. No transparency in png: in IE6, the solution to this problem is actually quite mature. There are various js files that can help solve this problem, however, I tend to use filters to process a small amount of transparent images:

1 background:url('imgs/test.png') no-repeat;2 _background:none;3 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='imgs/test.png');

The principle is that only IE6 can recognize css elements starting with _, and then use Microsoft filter to make this transparency. Although the efficiency will be lower, it doesn't matter if there are a few images.

6. Invalid z-index: this problem exists in the absolute positioning of IE6 and IE7. If the parent tag is different and you want to compare z-index to implement stack failure, IE6 and 7 both think that they should "compete" first to see which z-index of the parent element is large, and then compare their own z-index attributes. If the parent element does not have this value, the default value is 0. Alas, what is the problem with IE? The solution is to add the z-index layer by layer and the postion attribute value, let the son find his father.

In fact, there are still many other things that I can't remember. I can add them if I have time.

There are too many such messy bugs, so there are various browsers on the Internet with CSS hack to help us solve the problem of inconsistent display.

　　

　　Taking the width attribute as an example, CSS Hack mainly includes:

Usage	Supported
_ Width: 100px;	IE6
* Width: 100px;	IE6 and IE7
+ Width: 100px;	IE7
Width: 100px \ 9;	All IE
@ Media all and (-webkit-min-device-pixel-ratio: 0) {selector {width: 100px ;}}	Chrome and Safari
@ Media all and (min-width: 0px) {selector {width: 100px \ 0 ;}}	Opera
Width: 100px \ 0;	IE8 and IE9
Width: 100px \ 9 \ 0;	IE9

　

You can also use the conditional judgment statement unique to IE:

<! -- [If gte IE 6]> This text is only displayed in IE6 and later versions. <! [Endif] -->

<! -- [If gt IE 6]> This text is only displayed in IE6 or later versions (excluding IE6 ). <! [Endif] -->

<! -- [If IE 6]> This text is only displayed in IE6. <! [Endif] -->

All the preceding statements are judged using the exclusive condition annotations of IE,Lt= Less,Gt= Greater,Lte= Less than and equal,Gte= Greater than and equal to, the above 6 represents the IE version number, we can take 6, 7, 8, 9... separate IE versions, and insert exclusive Html code (JS and CSS) in the middle to fix the issue of different IE browser versions.

Reprinted please indicate the original address: http://www.cnblogs.com/lekko/archive/2012/07/23/2605098.html