代码改变世界

IE6下编写CSS

2013-06-09 17:46  muzinian  阅读(270)  评论(0编辑  收藏  举报

在IE6中存在浮动bug,这里有两种技术:条件注释和hack。

条件注释

条件注释就像普通的HTML注释,只不过有一条额外的信息:

<!--[if lte IE 6]>
<![endif]-->

注释部分if后面跟着一个等式,这个等式的含义是“如果版本低于或等于IE6”,意味着版本低于或等于IE6将输出注释块的内容,而不是当做普通的注释。更多关于条件注释,点击这里

hack

hack是一些技巧,使用这些技巧可以利用CSS分析器中的bug,以包含只在特定浏览器中工作的CSS。以下是两种可能有帮助的hack

第一种是下划线back,它允许编写中用于IE6的CSS。语法如下:

p{
    _height:1px;        
}

可以看到,普通的height属性前面带有一个下划线。因为这不是有效的CSS属性,所以大多数浏览器会忽略它,但IE6只忽略下划线,所以对IE6来说,这条规则类似于

p{
    height:1px;        
}

第二种是星号hack。其工作方式与下划线hack相同。但适用目标是IE6和IE7。语法如下:

p{  
    *width:100px;     
}

原理与下划线相同。大多数浏览器会无效的属性,而IE6和IE7忽略的则是星号。

有了这两种hack。可以单独将IE7作为目标,适用星号hack来应用同时适用于IE6和IE7的声明。然后对IE6用下划线重设声明:

p{
    *width:100px;
    _width:auto;        
}

这里顺序很重要,每一条声明被单独使用。

在一条规则里可以同时包含但前缀的声明和不带前缀的声明,不带前缀的声明适用于所有浏览器,如下:

p{
    width:100px;
    _width:50px;        
}

非IE6的浏览器的段落应用值为100px,而IE6为50px。这里顺序也十分重要,因为两种属性都适用于IE6.带有带有前缀的声明必须放在最后才能被应用。关于hack的更多介绍可以参阅这里