2023年6月21日发(作者：)
IE11的CSS兼容性问题 最近测试给了我⼀⼤堆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};就可以将红⾊的边框去掉了。
2016/01/15更新 今天⼤拿直接⼀⾏代码把我之前的IE11兼容性问题全解决了。不服不⾏。⼩伙伴们下次遇到兼容性问题记得先加上这⾏代码试试，不⾏再按照上⾯的⽅法来吧TAT，贴出代码 * { box-sizing: content-box; -moz-box-sizing: inherit; -webkit-box-sizing: inherit; }
2023年6月21日发(作者：)
IE11的CSS兼容性问题 最近测试给了我⼀⼤堆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};就可以将红⾊的边框去掉了。
2016/01/15更新 今天⼤拿直接⼀⾏代码把我之前的IE11兼容性问题全解决了。不服不⾏。⼩伙伴们下次遇到兼容性问题记得先加上这⾏代码试试，不⾏再按照上⾯的⽅法来吧TAT，贴出代码 * { box-sizing: content-box; -moz-box-sizing: inherit; -webkit-box-sizing: inherit; }
发布评论