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

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

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

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

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

Example Source Code [www.]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下显示为不同的外观。
　　
　　我们对CSS代码进行调整：

Example Source Code [www.]body { 
    margin:0; 
    padding:0;

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）