为 IE 编写兼容性样式

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711339 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711339

为 IE 编写兼容性样式

由于众所周知的原因,尽管 IE 非常傻 x ,但依旧存在很大的市场,所以必须为 IE11 编写一些特殊样式,才能让项目成功运行

更多精彩

IE11 专有 hack

  1. 在此 @media 中编写的样式,只有在 IE11 才会生效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .slide-right-pop-panel {
        top 0
    }
}

IE10 专有 hack

  1. IE7 - IE9 的专有注释在 IE10 不适用,需要使用以下方式读取
  2. @cc_on 为 IE10 脚本的功能检测名
<html>
<!--[if !IE]><!-->
<script>
  if (/*@cc_on!@*/false) {
    document.documentElement.className += ' ie10';
  }
</script>
<!--<![endif]-->
</html>

IE7 - IE9 专有 hack

  1. 以下编写的是 IE9 样式,其他只需要修改对应数字即可
  2. 通过为 添加对应的属性标签,可以完美区分各种 IE 浏览器样式
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
...
<style>
.ie9 #teacherSection {
  background-color: rgba(62, 137, 214, 1.000);
}

.ie9 #studentSection .student-item figure {
  display: none;
}
</style>
</html>
目录
相关文章
|
4月前
|
Web App开发 JavaScript 前端开发
JavaScript在IE和标准浏览器下的兼容性处理
JavaScript在IE和标准浏览器下的兼容性处理
41 0
|
JavaScript
我修复的印象最深的一个bug:vue在ie下的兼容性
很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。
224 0
我修复的印象最深的一个bug:vue在ie下的兼容性
|
Web App开发 JavaScript 前端开发
|
SQL Web App开发 JavaScript
|
Web App开发 JavaScript 前端开发