如何解析针对IE6的CSShack用法

今天就跟大家聊聊有关如何解析针对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

<h4> <ahrefahref="http://www.51cto.com/"> 我爱CSSCSSWebDesign-Web标准化Div+css教程</a> </h4>

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

ExampleSourceCode

body{  margin:0;  padding:0;  }  h4{  margin:50pxauto;  width:450px;  height:60px;  padding:5px;  border:1pxdotted#03c;  }  h4a{  display:block;  width:450px;height:60px;  text-indent:480px;  white-space:nowrap;  background:url(logo.jpg)no-repeat00;  overflow:hidden;  }

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

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

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

我们对CSS代码进行调整：

ExampleSourceCode

body{  margin:0;  padding:0;  }  h4{  margin:50pxauto;  width:450px;  height:60px;  padding:5px;  border:1pxdotted#03c;  }  h4a{  display:block;  width:450px;height:60px;  text-indent:480px;  white-space:nowrap;  background:url(logo.jpg)no-repeat00;  overflow:hidden;  }  *htmlh4{  border:1pxsolid#03c;  }

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

在IE7与FF中，虚线很漂亮，而在IE6下面，直接以实线显示。
我们可以举一反三，试着定义不同的外边距或背景图片等属性，进行查看。

看完上述内容，你们对如何解析针对IE6的CSS hack用法有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

网站标题：如何解析针对IE6的CSShack用法
路径分享：https://www.cdcxhl.com/article42/pgophc.html

成都网站建设公司_创新互联，为您提供动态网站、静态网站、小程序开发、建站公司、、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联