Solving css browser compatibility issues

1. !important (limited function)

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.)
For example:

#example {  
width: 100px !important; /* IE7+FF */  
width: 200px; /* IE6 */  
}

2. CSS HACK method (novices can take a look, experts should just pass by)

The first thing you need to know is:

Common height: 100px for all browsers;
IE6-specific_height: 100px;
IE7-specific*+height: 100px ;
IE6, IE7 share *height: 100px;
IE7, FF share height: 100px !important;

For example:

#example { height:100px; } /* FF */

* html #example { height: 200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

The following method is relatively simple

A few examples:

1, IE6 - IE7+ FF

#example {  
height:100px; /* FF+IE7 */  
_height:200px; /* IE6 */  
}

In fact, you can also use the first method mentioned above

#example {  
height:100px !important; /* FF+IE7 */  
height:200px; /* IE6 */  
}

2, IE6+IE7 - FF

#example {  
height:100px; /* FF */  
*height:200px; /* IE6+IE7 */  
}

3, IE6+FF - IE7

#example {  
height:100px; /* IE6+FF */  
*+height:200px; /* IE7 */  
}

4, IE6 IE7 FF are different

#example {  
height:100px; /* FF */  
_height:200px; /* IE6 */  
*+height:300px; /* IE7 */  
}

or:

#example {  
height:100px; /* FF */  
*height:300px; /* IE7 */  
_height:200px; /* IE6 */  
}

It should be noted that the order of the code must not be reversed, otherwise all the previous efforts will be wasted. Because when the browser interprets the program, if the name is the same, it will overwrite the previous one with the later one, just like assigning a value to a variable, so we put the general ones in the front and the more specialized ones in the back.

Explain 4 Code:

When reading the code, the first line height: 100px; is common to everyone, IE6 IE7 FF all displays 100px
When it comes to the second line *height: 300px; FF does not recognize this attribute, IE6 IE7 recognizes it, so FF still It displays 100px, while IE6 and IE7 overwrite the height attribute obtained in the first line, and both display 300px
When it comes to the third line_height:200px; only IE6 recognizes it, so IE6 overwrites the height obtained in the second line, and finally Display 200px
In this way, the three browsers have their own height attribute, let each play with it

If you still don’t understand, either you hit the wall, or I do it! But it’s better for you to do it.

Oh, I almost forgot to mention:
*+html Compatibility with IE7 must ensure the following statement at the top of the HTML:
〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http: //www.w3.org/TR/html4/loose.dtd"〉

3. Use IE-specific conditional comments

〈!--Other browsers--〉

〈link rel="stylesheet" type ="text/css" href="http://www.php1.cn/">

〈!--[if IE 7]〉

〈!-- Suitable for IE7 --〉

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈![endif]--〉

〈!--[if lte IE 6] 〉

〈!-- Suitable for IE6 and below--〉

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈 ![endif]--〉

Looks like I need to compile three sets of css. I haven’t used it yet. I’ll paste it first and then talk about it

IE’s if condition Hack

1. 〈!--[if !IE]〉〈!- -〉 Recognized by all except IE〈!--〈![endif]--〉
2. 〈!--[if IE]〉 Recognized by all IE〈![endif]--〉
3. 〈! --[if IE 5.0]〉 Only IE5.0 can recognize 〈![endif]--〉
4. 〈!--[if IE 5]〉 Only IE5.0 and IE5.5 can recognize 〈![endif] --〉
5. 〈!--[if gt IE 5.0]〉 IE5.0 and IE5.0 or above can recognize 〈![endif]--〉
6. 〈!--[if IE 6]〉 Only IE6 can recognize 〈![endif]--〉
7. 〈!--[if lt IE 6]〉 IE6 and below versions can recognize 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6 and above versions can recognize 〈![endif]--〉
9. 〈!--[if IE 7]〉 Only IE7 can recognize 〈![endif]--〉
10. 〈! --[if lt IE 7]〉 IE7 and below versions can recognize 〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7 and above versions can recognize 〈![endif] --〉Note: gt = Great Then greater than
〉 = 〉 Greater than sign
lt = Less Then Less than
〈 = 〈 Less than sign
gte = Great Then or Equal Greater than or equal to
lte = Less Then or Equal Less than or equal to

4. The css filter method (according to the author, it was translated from a classic foreign website)

Create a new css style as follows:

#item { 
width: 200px; 
height: 200px; 
background: red; 
}

Create a new div and use the previously defined css style:

〈div〉 some text here〈/div〉

Add the lang attribute here in the body performance, the Chinese is zh:

〈body〉

Now define another style for the div element:

*:lang(en) #item{ 
background:green !important; 
}

This is done to overwrite the original with !important css style, since the :lang selector is not supported by ie7.0, it will not have any effect on this sentence, so the same effect under ie6.0 is achieved, but unfortunately, safari also does not support this attribute, so you need to add the following css style:

#item:empty { 
background: green !important 
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。 

五、FLOAT闭合（clearing float） 

　　网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：
１、给父DIV也设上float(不要骂我，我知道是废话) 

2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙) 

比如： 

.parent{width:100px;}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;}  
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;} 

〈div〉  
〈div〉〈/div〉  
〈div〉〈/div〉  
〈div〉〈/div〉  
〈/div〉 

3、万能 float 闭合 

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.  
代码:  

〈style〉  
/* Clear Fix */  
.clearfix:after {  
content:".";  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
.clearfix {  
display:inline-block;  
}  
/* Hide from IE Mac \*/  
.clearfix {display:block;}  
/* End hide from IE Mac */  
/* end of clearfix */  
〈/style〉

:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。 

4、overflow:auto（刚看到的，极力推荐） 

只要在父DIV的CSS中加上overflow:auto就搞定。 

举例： 

.parent{width:100px;overflow:auto}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;} 

〈div〉  
〈div〉〈/div〉  
〈div〉〈/div〉  
〈/div〉 

作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。 

我试了一下，其实不加"_height:1%“在IE下也行，留着吧。 

六、需要注意的一些兼容细节 

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会. 

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。 
2, 页面居中问题. 

body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。 

解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; " 

3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。 

解决办法：试试在有空隙的DIV上加上"font-size:0px;" 

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 

5, 浮动IE6产生的双倍距离 

#box{ float:left;  
width:100px;  
margin:0 0 0 100px;  
}

这种情况之下IE6会产生200px的距离 

解决办法：加上display:inline，使浮动忽略 

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);  
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 

6 页面的最小宽度 

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。 

解决办法：为了让这一命令在IE上也能用，可以把一个〈div〉 放到 〈body〉 标签下，然后为div指定一个类：  
然后CSS这样设计：  

#container{  
min-width: 600px;  
width:e?xpression(document.body.clientWidth 〈 600? “600px”: “auto” );  
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 

7、UL和FORM标签的padding与margin 

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0； 

解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了. 

8 ,DIV浮动IE文本产生3象素的bug 

下面这段是我在网上粘过来的 

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. 

#box{  
float:left;  
width:800px;}  
#left{  
float:left;  
width:50%;}  
#right{  
width:50%;  
}  
*html #left{  
margin-right:-3px;  
//这句是关键  
}

HTML代码  

〈DIV id=box〉  
〈DIV id=left〉〈/DIV〉  
〈DIV id=right〉〈/DIV〉  
〈/DIV〉

针对上面这段代码，下面说一下我的理解： 

第一、只要right定义了width属性，在FF下绝对就会两行显示  
第二、两个width都定义为百分比的话，就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你width定义的是数值才用得上。 

所以说上面这段代码其实用处不大，至少在FF下不行。其实只要只定义left的width就行了，right不定义width就不管在IE还是FF下都能成功，但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了，真磨叽！ 

9,截字省略号 

.hh { -o-text-overflow:ellipsis;  
text-overflow:ellipsis;  
white-space:  
nowrapoverflow:hidden;  
}

这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意Firefox并不支持。