1. html5语义化兼容性问题
<!-- 现象: IE8 以下版本不支持 html5 语义化标签 -->
<header>我是header标签, 我应该独占一整行</header>
解决方式:
1)在浏览器解析标签之前, 动态创建一下 header 标签, 浏览器就认识了
document.createElement("header");
2)默认行内, 需要转成块级
header {
/* header 标签应该独占一整行 */
display: block;
}
但是 html5 新增了很多语义化标签, 一个个创建太麻烦了, html5shiv 插件很好的解决这个问题
1.1 html5shiv解决兼容性问题
在head中 引入 html5shiv 插件包即可解决 IE 8 不识别 html5 语义化标签的问题
<script src="html5shiv.js"></script>
但是在支持html5语义化标签的浏览器中, 这个js的执行就没有必要, 消耗了性能
所以我们可以通过 CSS IE条件注释 做兼容性处理
1.2 CSS条件注释(了解)
CSS IE条件注释 专门用于兼容IE 低版本
所以只有 IE9 及 IE9以下版本 才认识,其他版本的浏览器或者 IE10以上 的版本会当成注释, 不会解析
它里面有判断IE版本的方式:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
用法实例:
在小于等于 IE 8 的浏览器中才会执行, 在IE9 中, 就是普通的注释, 不会解析执行
<!--[if lte IE 8]>
<script>
alert("呵呵, 小于等于IE8都会执行这段话");
</script>
<script src="html5shiv.js"></script>
<![endif]-->
大于 IE 8 的浏览器才执行, 只有 IE 9 认识, 其他浏览器, IE 10 及以上, 都将条件注释当成注释
<!--[if gt IE 8]>
<script>
alert("只有IE9才执行这句话");
</script>
<![endif]-->
2. html5 新增类名操作(熟记)
四个操作样式类的方法, 很简单, 需要熟记
1) 添加类: dom.classList.add
2) 移除类: dom.classList.remove