1.@import
在@import中使用URL来导入样式，标准的用法便是将URL中的值带上引号。例如：@import url（“newstyle.css”); 带引号的URL地址只能被IE5及以上浏览器、以及firefox所识别，而IE4及以下版本的浏览器不会解析newstyle.css 。@import的这种用法主要区别IE4。
另一种用法如下：
@import url（“none.IE.css”） screen；
Screen参数是CSS提供的用于指定设备类型的选项，表示用于屏幕显示，print表示用于打印设备的显示。而IE浏览器对设备类型都不支持，因此可以利用这个情况来做IE浏览器的区别。使用以上代码，none.IE中的样式在IE系列中不会被解析，只会被firefox解析，这样就做到了IE与firefox的区别处理。
2.注释
CSS中的注释语句可以用/* */来标记一段注释内容。由于版本升级的原因，在对注释的解析上，IE浏览器也有所区别，因此可以利用注释语句来进行CSS hack。比如以下代码：
#content/**/{color:red;}
在选择符与大括号之间使用注释语句，这样的代码在IE6中看上去是可以显示的，而在IE5及以下版本浏览器确不会被处理，因此可以针对IE5进行单独处理。
注意：选择符与/**/之间不允许有空格存在，如果有空格存在，那么该CSS hack不会产生任何作用。
3.属性选择符
属性选择符用于特定属性的对象进行选择。使用方法如下：
span[class=left]{color：blue；}
表示对所有class名为left的span进行选择，等同于：
span.left{color:blue;}
Class属性也可以替换成其他属性。IE浏览器至今也没有对这种方法提供支持。属性选择器在firefox中可以正常工作，但对于IE却没有任何作用，可以利用这个方法来进行IE6及firefox浏览器进行区别处理
4.voice-family
Voice-family是CSS针对残疾人使用的设备进行特别设置的一个方法。Voice-family可以指定网页中的内容，使用哪种声音进行朗读。在特殊的盲人阅读器上，使用此方法可以设置阅读方式，现在已成为针对IE6以下浏览器的一个特别的CSS hack方法。使用方法如下：
#content{
voice-family:”/”}\””;
voice-family:inherit;
color:red;
}
使用代码中的两句voice-family之后，下面的属性将不会被IE5.5及一下版本浏览器所解析。
除此之外，voice-family还可以使用另一种处理方式。代码如下：
#content{
Color：blue；/*IE6及以上版本，firefox可见*/
voice-family:”}”;
voice-family:inherit;
color:red;/*IE5可见*/
}
5.+hack
+号hack方法用于区分IE系列浏览器与其他浏览器。使用方法如下：
#content{
width：500px；
+width：480px；/*IE可执行*/
}
在相同属性的设置下，带有+号的属性只能在IE下运行，这样我们便可以通过这种方式去区别对待IE系列浏览器与其他厂商的浏览器。
6.简单盒模型hack方法
为了保证IE6及IE5.5及以下版本浏览器都能够显示正常，可以使用voice-family处理盒模型的问题，但有时候未免过于麻烦，所以也可以使用另外一种方法去解决。代码如下：
div.box{
border:20px solid;
padding:20px;
margin:20px;
width:400px;
\width:480px;
w\idth:400px;
}
加了反斜杠的width参数，使IE5.5能够执行\width:480px;而IE6及firefox执行width：400px；这样，利用一些IE6对web标准不严格执行的bug，我们简单解决了盒模型的解析问题。
7.捉迷藏问题
所谓捉迷藏问题是指给页面编写的一些内容在浏览器中没有显示出来。解决这个问题应当从两个方面入手：一是使用技巧去解决bug，二是通过一些编码习惯，预防捉迷藏情况的发生。
<div id=”layout”>
<div id=”left”></div>
<div id=”right”></div>
<div id=”clear”></div>
</div>
一、对页面上的对象使用float属性之后，最后使用带有clear：both；的div来对页面进行一些浮动的清理，尽量避免对#layout使用background。
二、如果可能，可以给#layout使用一个固定宽度和高度。尽管这样做会对页面有所限制，但能够消除一些捉迷藏问题。
三、可以尝试给#layout的#left使用position：relative；
四、对#layout使用line-height属性，强制浏览器对其中内容进行行距调整，从而消除捉迷藏bug。默认的行高度的浏览器似乎是在1.1-1.2左右，所以设置line-height的周围没有或几乎没有提供任何视觉上的改变，但治疗IE浏览器中的错误。
8.IE 3px问题
3px问题不是经常被人们发现，因为它的影响只是产生3px的位移，特别是在大块的设计中不容易发现。如果设计时使用了精确到像素的设计方法，3px的位移可能会产生很大的影响。先看一下下面的代码所产生的情况：
<body>
<div id="content">左浮动div</div>
段落A
<p id="myp">段落B</p>
<div id="mydiv">段落C<br />
段落C第二排<br />
段落C第三排<br />
段落C第四排
</div>
</body>
样式设计：
#content{
float:left;
border:1px solid #333;
width:100px;
height:100px;
}
#myp{
border:2px solid #eee;
}
#mydiv{
border:4px solid #f66;
margin-left:140px;
}
在IE的显示：
在firefox中的显示：
从上面的截图中可以看到，使用float时在IE中的显示并非是紧凑着前面的div，而是多了3px的距离。针对此问题，可以使用两种方法来解决，可以加入如下代码：
#mydiv{
border:4px solid #f66;
margin-left:140px;
display：inline-block；
}
或者使用line-height：
#mydiv{
border:4px solid #f66;
margin-left:140px;
line-height：0%；
}
这两种方法都能够解决IE下div出现的3px问题，但是对于单独出现的文本就无能为力了。在实际运用中，避免出现文本对象直接与#content进行接触，以防止产生3px问题。如果是图片，则只有通过margin-left：-3px；来解决。值得注意的是，如果设置IE里面的margin-left：-3px的话，在firefox中则要通过hack设置回来，以防止引发firefox中的-3px问题。
9.高度不适应
高度不适应是指：当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层对象使用了margin或者padding之后。高度不适应问题并不是IE的专属，firefox也出现这种问题。看一下代码：
表现层：
<div class="box">up</div>
<div id="box">
<p>p对象的内容</p>
</div>
<div class="box">down</div>
结构层：
#box{
background-color:#eee;
}
#box p{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}
.box{
background-color:#aaa;
上面代码在浏览器中的显示：
似乎并不是想象中的结果，看上去#box的背景和文本一样的高度，并没有超过30px，上下两个div并没有紧贴对象#box，而是有一定的间距，这个间距刚好是p对象的margin的上下外边距，这就说明#box对象并没有因其中的p对象的margin的变化而改变自身的高度。而p对象的margin高度又确实在页面中占据了一定的空间。无论是IE还是firefox都会出现这个问题，在制作多个div布局嵌套是会产生一定的影响，下面是解决方案：
一、给#box定义padding或者border（边框的颜色设置成与背景色相同，这样用户就会看不见这个边框），这样会使#box重新计算自己的高度。
#box{
background-color:#eee;
padding:1px 0;（或者是border：1px solid #fff；）
}
现在看看在浏览器中的显示效果：
二、修改html代码：
<div id="box">
<div class=”clear-div”></div>
<p>p对象的内容</p>
<div class=”clear-div”></div>
</div>
.clear-div{
height:0px;
overflow:hidden;
}
使用两个空div的高度均为0，并强制不显示，这样两个对象只充当了占位符的角色，而不发生实际的占位。而对于#box而言，由于其中多了一些逻辑上的占位对象，使得它会重新计算自己的高度，从而实现高度自适应。
1473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
