HTML5技术

IE11的CSS兼容性问题 - 666的不得了

字号+ 作者:H5之家 来源:博客园 2016-01-15 08:12 我要评论( )

最近测试给了我一大堆BUG,一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。但是当需要修改的时候又头疼了。如果改变原有的padding值,那么在

  最近测试给了我一大堆BUG,一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。但是当需要修改的时候又头疼了。如果改变原有的padding值,那么在IE11生效了。别的浏览器又有问题了。于是在网上搜了一下有没有专门针对IE11的CSShack,就是只对IE11生效的CSS样式,一查还真有。就是在CSS样式文件中加一个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的样式}。

  比如,我在chrome浏览器中给一个div设置样式

  div{

    padding:0 12px;

  }

  那么,在IE11中想要实现上面效果,需要在这个下面再添加一行样式  

  div{

    padding:0 12px;

  }

  @media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {

    div{padding:0 6px;}

  }

  这里需要注意一下IE11的样式要写在最后面防止被覆盖,当浏览器为IE11时,@media中的样式会被执行一遍。

  还有一个就是IE11针对h5的表单验证部分,验证失败后input标签会出现一个红色的框,比较丑。这个时候你只要针对专门的input标签,增加一个input{outline:none};就可以将红色的边框去掉了。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【查缺补漏】工作中遇到的问题集锦01 - 鬼脸

    【查缺补漏】工作中遇到的问题集锦01 - 鬼脸

    2017-04-13 08:04

  • 学习H5仿制网站时遇到的问题 - novai-L

    学习H5仿制网站时遇到的问题 - novai-L

    2017-03-20 09:02

  • 移动端部分兼容问题总结 - 巷子太窄

    移动端部分兼容问题总结 - 巷子太窄

    2017-03-14 16:00

  • H5微信播放全屏问题 - 津津unique

    H5微信播放全屏问题 - 津津unique

    2017-03-09 15:03

网友点评
r