Detailed explanation of DIV CSS browser compatibility

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 can just pass by)

The first thing you need to know is:

All views Common to all devices height: 100px;
Special to IE6_height: 100px;
Special to IE7* height: 100px;
Common to IE6 and IE7*height: 100px; Shared 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 */  
}

need to pay attention The most important thing is that the order of the code must not be reversed, otherwise all the 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 the

variable , so we put the general ones in the front, and the more specific ones in the back.

Explain the code of 4:

When reading the code, the first line height: 100px; is common to everyone, IE6 IE7 FF all display 100px

When it comes to the second line *height: 300px; FF does not recognize this
attribute , but IE6 and IE7 recognize it, so FF still displays 100px, while IE6 and IE7 overwrite the height attribute obtained in the first line, and both display 300px to the third line. _height:200px; only IE6 knows it, so IE6 overwrites the height obtained in the second line, and finally displays 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 go! But it’s better for you to go.

Oh, I almost forgot to mention:

* To be compatible with IE7, html 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. Conditions specific to using IE

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]-->

It seems that three sets are required css, I haven’t used it yet, I’ll paste it here first

IE’s if condition Hack

1. 〈!--[if !IE]〉〈!--〉 except IE Recognizable〈!--〈![endif]--〉

2. 〈!--[if IE]〉 All IE can recognize〈![endif]--〉
3. 〈!-- [if IE 5.0]〉 Only IE5.0 can recognize 〈![endif]--〉 〈!--[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 it〈![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 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:

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

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

〈p 〉some text here〈/p〉

Add the

lang

attribute to the body representation, the Chinese is zh: 〈body>

Now define another style for the p element:

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

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

: The empty selector is a CSS3 specification, although Safari does not support this specification. , but this element will still be selected, regardless of whether this element exists, and the green color will now appear on browsers other than IE versions.

#item:empty { 
background: green !important 
}

5.

FLOAT

Close (clearing float)

　　网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是p无法自适应高度的一个原因。如果父p没有设float而其子p却设了float的话,父p无法包住整个子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;} 
〈p〉  
〈p〉〈/p〉  
〈p〉〈/p〉  
〈p〉〈/p〉  
〈/p〉

3、万能 float 闭合 

将以下代码加入Global CSS 中,给需要闭合的p加上 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;} 
〈p〉  
〈p〉
〈/p〉  
〈p〉
〈/p〉  
〈/p〉

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

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

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

1, FF下给 p 设置 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上也能用，可以把一个〈p〉 放到 〈body〉 标签下，然后为p指定一个类：  
然后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并不支持。 

 以上就是DIV+CSS浏览器兼容性的详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！