IE11的CSS兼容性问题

￡神魔★判官ぃ 2022-10-09 00:36 339阅读 0赞

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

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

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

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

  1. 　  div{
  3. 　　　　padding:0 12px;
  5. 　　}
  7. 　　那么，在IE11中想要实现上面效果，需要在这个下面再添加一行样式　　
  9. 　　div{
  11. 　　　　padding:0 12px;
  13. 　　}
  15. 　　@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
  17. 　　　　div{padding:0 6px;}
  19. 　　}

2016/01/15更新

　　今天大拿直接一行代码把我之前的IE11兼容性问题全解决了。不服不行。小伙伴们下次遇到兼容性问题记得先加上这行代码试试，不行再按照上面的方法来吧TAT，贴出代码

　　　　

  1. 　　　　* {
  2. 　　　　　　box-sizing: content-box;
  3. 　　　　　　-moz-box-sizing: inherit;
  4. 　　　　　　-webkit-box-sizing: inherit;
  5. 　　　　　}

发表评论

表情：
评论列表 （有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

    相关 IE11的CSS兼容性问题

    最近测试给了我一大堆BUG，一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同，而且最明显的一点应该是padding左右内边距往往比别的

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 340 阅读

    相关 IE11兼容

    最近在做一个项目的时候，发现如下IE11兼容性问题： （1）js中不支持使用模板字符串（反引号）； （2）new ActiveXObject只能在IE下使用，谷歌浏览器下不

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 435 阅读