让ie78支持background-size和nth-child

一、让ie支持background-size


      网站中为了使图片比较清晰,因此把icon的尺寸都放大了二倍,再通过background-size缩小到想要的大小。原本是没打算兼容低版本ie,就这样放开的做了起来。最后,产品说要兼容低版本浏览器ie8。于是头疼的事情出现了

       本来是想通过两套图片解决,支持background-size的用大图。然后不支持的ie用hack使用小图。后来前端另一个同学发过来一篇文章,说可以解决低版本ie支持background-size。它是一个.htc的文件,也类似于js脚本文件。点击https://github.com/louisremi/background-size-polyfill进入官网


.htc文件

       抱着试试的想法把文件放在相应的目录下,然后css中有用到background-size的地方加上behavior:url(backgroundsize.min.htc);

然后用ie8浏览发现确实是支持了background-size属性了。


引入.htc

       这样的好处是:不用再做两套图片了。

       但麻烦的是:每一个有background-size的地方都需要加上那两行代码。后期一个一个加的话比较麻烦。

       坑:发现input标签图片的background-size 时加上这两句,在IE低版本里面就不再生效。这样针对input的标签还是需要做两套图。


二、让ie支持nth-child属性


如  .fl-block-3:nth-child(2)  这个样式ie8不支持,兼容写法为

.fl-block-3:first-child+div

如果为nth-child(3) 就写成  .fl-block-3:first-child + div + div

此方法适合于比较少的子元素。否则如果有几十个元素,后面要加几十个div吗

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,000评论 0 1
  • 文/唐培蕊 一、 莫小看到眼前的教堂,鼻子一酸,眼泪一直打转。吴立把婚礼定在台东的卡片教堂,他是不是还记得她当时看...
    ENT_Pray阅读 1,716评论 0 3
  • 关于《七夕》的诗,这几年其实也写了五六首,因为一些是好几年前写的,一则因为现在上不了台面,二则是大多比较忧伤的感觉...
    肖才胜阅读 4,821评论 2 7