如何解析针对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
我爱CSSCSSWebDesign-Web标准化Div+css教程
这是一个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用法
新闻来源:http://ybzwz.com/article/pgophc.html