以下讨论的是和相关的实例解析一款针对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
- <h3>
- <ahrefahref="http://www.51cto.com/">
- 我爱CSSCSSWebDesign-Web标准化Div+css教程a>
- h3>
这是一个LOGO元素,应用H3标签进行组织,而LOGO图片则在CSS背景图片中进行定义。
看下面的CSS代码:
ExampleSourceCode
- body{
- margin:0;
- padding:0;
- }
- h3{
- margin:50pxauto;
- width:450px;
- height:60px;
- padding:5px;
- border:1pxdotted#03c;
- }
- h3a{
- 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;
- }
- h3{
- margin:50pxauto;
- width:450px;
- height:60px;
- padding:5px;
- border:1pxdotted#03c;
- }
- h3a{
- display:block;
- width:450px;height:60px;
- text-indent:480px;
- white-space:nowrap;
- background:url(logo.jpg)no-repeat00;
- overflow:hidden;
- }
- *htmlh3{
- border:1pxsolid#03c;
- }
请注意最下面CSS代码的写法。应用了选择器“*htmlh3”。而“*html”就是针对IE6及以下浏览器的CSS HACK选择器了。我们再次打开IE6查看,得到如下的效果:
在IE7与FF中,虚线很漂亮,而在IE6下面,直接以实线显示。
我们可以举一反三,试着定义不同的外边距或背景图片等属性,进行查看。在实际开发中,对这些CSS HACK应该是非常灵活的,大家要多思考,有经验心得,欢迎来52CSS.com与大家分享。
【编辑推荐】
关于实例解析一款针对IE6的CSS hack用法的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/
a/2011030368226.shtml方便下次再访问哦。