一款针对IE6的CSS hack用法实例 — 52CSS边线

　　CSS网页布局的兼容性问题一直困扰着大家，也有网友在52CSS.com的留言板要求多增加这方面的内容，其实在52CSS以前的文章中也有着丰富的CSS HACK与CSS兼容性的文章，只是有些文章可能讲的比较抽象而没有实例化，不便于大家的理解。52CSS将陆续推出这方面的实例教程，希望大家予以关注。

　　CSS HACK与css兼容性的文章有：
　　CSS Hack代码范例：兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0
　　http://www.52css.com/article.asp?id=280
　　CSS Hack技术速查对照
　　http://www.52css.com/article.asp?id=460
　　CSS实例：区分IE6、IE7、FF对HR解释的CSS hack
　　http://www.52css.com/article.asp?id=558
　　CSS hacks：浏览器特定选择器介绍
　　http://www.52css.com/article.asp?id=635
　　必须掌握的关于IE6、IE7和FF最简单的CSS hack技巧
　　http://www.52css.com/article.asp?id=826

　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　现在要讲解的是一个关于IE6的CSS HACK的用法。我们以一个LOGO为实例，讲解了针对IE6，应用CSS HACK设置有别于IE7和FF的效果。我们看下面的HTML代码：

Example Source Code [www.52css.com]<h3>
    <a href="http://www.52css.com/">我爱CSS CSS Web Design -Web标准化 Div+css教程</a>
</h3>
　　这是一个LOGO元素，应用H3标签进行组织，而LOGO图片则在CSS背景图片中进行定义。
　　看下面的CSS代码：

Example Source Code [www.52css.com]body { 
    margin:0; 
    padding:0;
}
h3 { 
    margin:50px auto; 
    width:450px; 
    height:60px; 
    padding:5px; 
    border:1px dotted #03c;
}
h3 a { 
    display:block; 
    width:450px; height:60px; 
    text-indent:480px; 
    white-space:nowrap; 
    background:url(logo.jpg) no-repeat 0 0; 
    overflow:hidden;
} 
　　设置BODY与H3的样式。将LOGO图片置于H3标签下面的链接元素中。我们打开IE7与FF查看到的效果如下：


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

▲▲▲ >>>点击查看运行效果<<<

　　虚线不是那么美观了，显得非常粗糙，这时候我们该怎么办呢？
　　我们可以针对IE6浏览器进行CSS HACK设置，定义在IE6下显示为不同的外观。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　我们对CSS代码进行调整：

Example Source Code [www.52css.com]body { 
    margin:0; 
    padding:0;
}
h3 { 
    margin:50px auto; 
    width:450px; 
    height:60px; 
    padding:5px; 
    border:1px dotted #03c;
}
h3 a { 
    display:block; 
    width:450px; height:60px; 
    text-indent:480px; 
    white-space:nowrap; 
    background:url(logo.jpg) no-repeat 0 0; 
    overflow:hidden;
} 
* html h3 {
    border:1px solid #03c;
}
　　请注意最下面CSS代码的写法。应用了选择器“* html h3”。而“* html”就是针对IE6及以下浏览器的CSS HACK选择器了。
　　我们再次打开IE6查看，得到如下的效果：


▲▲▲ >>>点击查看运行效果<<<

　　在IE7与FF中，虚线很漂亮，而在IE6下面，直接以实线显示。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　我们可以举一反三，试着定义不同的外边距或背景图片等属性，进行查看。在实际开发中，对这些CSS HACK应该是非常灵活的，大家要多思考，有经验心得，欢迎来52CSS.com与大家分享。