常见浏览器兼容性问题

学习条件

1. 了解CSS样式基础
2. 了解样式选择器及生效规则
3. 了解Float/Flex基本布局

学习目标

1. 学会使用Normalize.css和Reset.css重置浏览器默认样式
2. 理解标准W3C盒子模型和IE盒子模型
3. 了解CSS后处理器的作用

学习资源

1. 理解标准W3C盒子模型和IE盒子模型
2. 浏览器默认样式对比表
3. Normalize.css
4. Reset.css
5. 浏览器兼容性问题及解决方案(CSS部分)
6. CSS预处理器框架与CSS后后处理器框架
7. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型

习题

习题一: 尝试在不用浏览器运行下面的代码

下面的CSS代码是符合W3C标准的代码，其作用是为元素添加无限旋转的动画。请尝试在不同浏览器中运行，观察是否能如期执行，如果不能如期执行请找原因并修复。

/*无限旋转*/
.revolve{
    animation: revolve 2s linear infinite;
}
@keyframes revolve {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

提示：通过后处理器(例如：Autoprefixer)为代码增加兼容性前缀，例如：“-webkit-”

下面可以学

1. Flex布局
2. Gulp前端自动化工具