文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

你可能不知道的IE8 CSS Hack猎奇写法

编程小独行侠

编程小独行侠

2024-04-23 23:27

关注

       在css中,有一个专有名词叫做CSS Hack。它的作用是是兼容各种浏览器,然而IE浏览器总是个令人头疼的存在,因为很多兼容性问题都源于它。尽管如此,但在目前而言,IE浏览器仍然主流浏览器之一,使用人数众多。所以web程序员们还是需要绞尽脑汁去处理其兼容问题。今天我们编程学习网将向大家介绍一个仅针对IE8有效的CSS Hack猎奇写法。

你可能不知道的IE8 CSS Hack猎奇写法_CSS教程_CSS技巧_IE8兼容_编程学习网

  最近我们编程学习网工作人员在做项目的时候,引用了Google Font的在线字体,估计是因为浏览器对字体的渲染方式不同或者是字体格式不一样,结果导致IE8中导航是错位的,而IE9和IE10中是正常的。

  要想IE8也实现兼容,是时候让IE8的Css Hack上场了。什么?你不知道IE8的CSS Hack。在网上搜索一下嘛!通过搜索,你不难发现,IE8的CSS Hack就是在属性后面加上\9或者\0,代码如下:

  color:#FFF\0;                      

  color:#FFF\9;                      

  加上之后,发现IE8确实是没有问题了,问题好像解决了喔!但是事情的发展好像没有我们想象中那么顺利。这时IE9和IE10反而出现问题了,因为上面的Hack同样对IE9和IE10起作用了。

  好吧,实践证明这个CSS Hack不是IE8专有的。那怎么做才能只针对IE8做Hack呢?我们需要转变一下思路:可以先应用IE8的Hack,与非IE浏览器分开,然后再应用一些CSS3之类的IE8不支持的选择器来重新覆盖一遍,让支持新选择器的IE9、IE10正常显示。符合条件的常用选择器有:root,于是就可以写出下面代码:

  .section-nav li a {  

  display: block;  

  padding: 10px 13px;  

  padding: 10px 7px  10px 7px \9;  

  border-right: 1px solid #d7d7d7;  

  }  

  :root .section-nav li a {  

   padding: 10px 13px 10px 13px;  

  }  

  这样就做到了只对IE8浏览器起作用的CSS Hack了,是不是很简单呀!学会了这个猎奇写法之后,如果大家在实际操作中遇到类似的情况就可以轻松解决了。这里我们介绍得比较简单,有不懂的地方,需要大家慢慢领会。最后,希望大家有所收获,感谢大家的支持!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     174人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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