文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何解析针对IE6的CSS hack用法

2024-04-02 19:55

关注

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

我们再打开IE6查看,得到如下的效果:

如何解析针对IE6的CSS hack用法

 虚线不是那么美观了,显得非常粗糙,这时候我们该怎么办呢?我们可以针对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查看,得到如下的效果:

如何解析针对IE6的CSS hack用法

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯