Beheben von Kompatibilitätsproblemen mit CSS-Browsern

1. !important (eingeschränkte Funktion)

Mit der IE7-Unterstützung für !important ist die !important-Methode jetzt nur mit IE6 kompatibel (Achten Sie auf die Schreibweise. Denken Sie daran, dass die Deklarationsposition sein muss im Voraus.)
Zum Beispiel:

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

2. CSS-HACK-Methode (Anfänger können einen Blick darauf werfen, Experten können einfach vorbeikommen)

Das Erste, was Sie wissen müssen ist:

Alle Ansichten Gemeinsame Höhe: 100px;
IE7-spezifische*+Höhe: 100px; >IE7, FF geteilte Höhe: 100px!

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

Tatsächlich können Sie auch die erste oben genannte Methode verwenden

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

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

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

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

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

Erklären Sie den Code von 4:

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

Wenn es darum geht zur zweiten Zeile *height: 300px; FF erkennt dieses Attribut nicht, IE6 und IE7 erkennen es, sodass FF immer noch 100px anzeigt, aber IE6 und IE7 überschreiben das in der ersten Zeile erhaltene Höhenattribut und beide zeigen 300px an

Auf diese Weise haben die drei Browser jeweils ihre eigenen Höhenattribute Spiel damit

Wenn du es noch nicht verstehst, gehst du entweder gegen die Wand, oder ich gehe. Aber es ist besser, wenn du gehst.

Oh, ich hätte fast vergessen zu erwähnen:
*+html Die Kompatibilität mit IE7 muss die folgende Anweisung oben im HTML sicherstellen:

3. Verwenden Sie IE-spezifische bedingte Kommentare

〈! --Andere Browser--〉

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

IE's if-Bedingungs-Hack

1. 〈!--[if !IE]〉〈!--〉 Wird von allen außer IE erkannt〈!--〈![endif]--〉

3. 〈!--[if IE 5.0]〉 Nur IE5.0 kann 〈![endif]- erkennen -〉

5. 〉 IE5.0 und IE5.0 oder höher 〈![endif]--〉 〈![endif]--〉 〈!--[if IE 6]〉 〈!--[if IE 6]〉 Nur IE6 kann erkennen 〈![endif]--〉 〈!--[if lt IE 6]〉 IE6 und niedrigere Versionen können 〈![endif]--〉

9〈!--[wenn IE 7]〉 Nur IE7 kann 〈![endif]--〉 〈!--[. wenn IE 7]〉 IE7 und niedrigere Versionen können 〈![endif]--〉
11 erkennen. 〈!--[if gte IE 7]〉 IE7 und höher können 〈![endif]--〉 erkennen : gt = Großartig Dann ist größer als
〉 = 〉 Größer als Vorzeichen
lt = Kleiner als Kleiner als
〈 = 〈 Kleiner als Vorzeichen
gte = Groß Dann oder Gleich Größer als oder gleich
lte = Kleiner als oder gleich Kleiner als oder gleich

4. Die Methode des CSS-Filters (laut Autor wurde sie von einer klassischen ausländischen Website übersetzt) ​​

Erstellen Sie eine neue CSS-Stil wie folgt:


Erstellen Sie ein neues Div und verwenden Sie den CSS-Stil der vorherigen Definition:

〈div 〉some text here〈/div〉

Fügen Sie das hinzu lang-Attribut hier in der Körperdarstellung, Chinesisch ist zh:

〈body〉

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

Dies erfolgt zum Überschreiben der ursprüngliche CSS-Stil mit !important. Da der :lang-Selektor ie7.0 dies nicht unterstützt, hat dieser Satz keine Auswirkung, sodass der gleiche Effekt unter IE6.0 erzielt wird, aber leider unterstützt Safari dieses Attribut nicht. Daher muss der folgende CSS-Stil hinzugefügt werden:

#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并不支持。