实例解析一款针对IE6的CSS hack用法

本文通过实例向大家描述一下IE6的CSS hack用法，我们以一个LOGO为实例，讲解了针对IE6，应用CSS HACK设置有别于IE7和FF的效果。具体内容请看本文详细介绍，相信本文介绍一定会让你有所收获。

一款针对IE6的CSS hack用法实例

CSS网页布局的兼容性问题一直困扰着大家，其实在51cto.com以前的文章中也有着丰富的CSS HACK与CSS兼容性的文章，只是有些文章可能讲的比较抽象而没有实例化，不便于大家的理解。

现在要讲解的是一个关于IE6的CSS HACK的用法。我们以一个LOGO为实例，讲解了针对IE6，应用CSS HACK设置有别于IE7和FF的效果。我们看下面的HTML代码：

ExampleSourceCode

1. <h3> 
2. <ahrefahref="http://www.51cto.com/"> 
3. 我爱CSSCSSWebDesign-Web标准化Div+css教程</a> 
4. </h3> 
5.  

这是一个LOGO元素，应用H3标签进行组织，而LOGO图片则在CSS背景图片中进行定义。
看下面的CSS代码：

ExampleSourceCode 

1. body{  
2. margin:0;  
3. padding:0;  
4. }  
5. h3{  
6. margin:50pxauto;  
7. width:450px;  
8. height:60px;  
9. padding:5px;  
10. border:1pxdotted#03c;  
11. }  
12. h3a{  
13. display:block;  
14. width:450px;height:60px;  
15. text-indent:480px;  
16. white-space:nowrap;  
17. background:url(logo.jpg)no-repeat00;  
18. overflow:hidden;  
19. }  

设置BODY与H3的样式。将LOGO图片置于H3标签下面的链接元素中。我们打开查看到的效果如下：

我们再打开IE6查看，得到如下的效果：

　虚线不是那么美观了，显得非常粗糙，这时候我们该怎么办呢？我们可以针对IE6浏览器进行CSS HACK设置，定义在IE6下显示为不同的外观。

我们对CSS代码进行调整：

ExampleSourceCode

1. body{  
2. margin:0;  
3. padding:0;  
4. }  
5. h3{  
6. margin:50pxauto;  
7. width:450px;  
8. height:60px;  
9. padding:5px;  
10. border:1pxdotted#03c;  
11. }  
12. h3a{  
13. display:block;  
14. width:450px;height:60px;  
15. text-indent:480px;  
16. white-space:nowrap;  
17. background:url(logo.jpg)no-repeat00;  
18. overflow:hidden;  
19. }  
20. *htmlh3{  
21. border:1pxsolid#03c;  
22. }  

请注意最下面CSS代码的写法。应用了选择器“*htmlh3”。而“*html”就是针对IE6及以下浏览器的CSS HACK选择器了。我们再次打开IE6查看，得到如下的效果：

在IE7与FF中，虚线很漂亮，而在IE6下面，直接以实线显示。

我们可以举一反三，试着定义不同的外边距或背景图片等属性，进行查看。在实际开发中，对这些CSS HACK应该是非常灵活的，大家要多思考，有经验心得，欢迎来52CSS.com与大家分享。
 

【编辑推荐】

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
， 实例
， px
， 效果
， ie6
， hack
针对IE
ie6 hack、css ie6 hack、ie6 7 8 hack、ie6 ie7 hack、ie68 hack，以便于您获取更多的相关知识。