1.为什么会出现浏览器兼容问题？

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

2.主流浏览器
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游
最早的浏览器 : Netscape Navigator(网景领航者)（1994-2008）
浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator大打出手
查看浏览器市场份额
- https://tongji.baidu.com/research
  3.浏览器内核
Trident (IE内核)
- Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。
Gecko(firefox)
- Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
webkit(Safari)
- Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。
Chromium/Bink(chrome)
- 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。
Presto (Opera)
- Presto 是挪威产浏览器 opera 的 “前任” 内核，最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了
移动端的浏览器
- 移动端的浏览器内核主要说的是系统内置浏览器的内核。目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。
  4.CSS Hack (Hack 方法)
指一种兼容CSS在不同浏览器中正确显示的技巧方法

图片间隙

img设置display:block;
img设置vertical-align:不为baseline;
父元素设置font-size:0;

浮动双倍外边距(IE6会碰到)

子元素display:inline;
元素脱离文档流后就可以设置宽高了

表单元素高度及对齐方式不一致

浮动起来,再调节高度

a标签包裹图片,IE中会出现边框

img {border:none;}
IE10及以下会出现

透明写法

opacity:0~1;IE8以上的浏览器识别
filter:alpha(opacity=1~100); IE9及IE9以下的浏览器

万能清除浮动法在IE中

.clearfix:after {
 content:"";
display:block;
clear:both;
}
.clearfix {
 zoom:1;
}

5.属性前缀法

IE6识别_-
ie6,7识别*+#
ie8-ie11识别在属性后\0
ie9-10识别在属性后\9\0

6.CSS 优化
有选择地使用选择器
- CSS选择器的匹配是从右向左进行的，这一策略导致了不同种类的选择器之间的性能也存在差异。相比于#markdown-content-h3，显然使用#markdown .content h3时，浏览器生成渲染树所要花费的时间更多。因为后者需要先找到DOM中的所有h3元素，再过滤掉祖先元素不是.content的，最后过滤掉.content的祖先不是#markdown的。试想，如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高。
优化重排与重绘
- 在网站的使用过程中，某些操作会导致样式的改变，这时浏览器需要检测这些改变并重新渲染，其中有些操作所耗费的性能更多。我们都知道，当FPS为60时，用户使用网站时才会感到流畅。这也就是说，我们需要在16.67ms内完成每次渲染相关的所有操作，所以我们要尽量减少耗费更多的操作。
不要使用@import
文件压缩
建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动
减少通配符*或者类似[hidden=”true”]这类选择器的使用
巧妙运用css的继承机制
cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。
命名优化，比如字体大小20px，类名可以使用font20
- 在做项目前，把页面上所有的常用字号、字体颜色、行高、外边距、内边距等属性都设置成单独的类，这个类就叫原子类。
- 7.宽高自适应
width 和 height 的默认值为auto
最大最小宽高的使用
- 最大宽度max-width
- 最小宽度min-width
- 最大高度max-height
- 最小高度min-height
html , body { height:100%; } 的必要性
浮动元素父容器高度塌陷

8.拓展知识 - 安卓和IOS系统上CSS属性的兼容问题
链接1：https://www.jianshu.com/p/001bec542d88
链接2：https://blog.csdn.net/iChangebaobao/article/details/102969820

i 老师-HTML与CSS知识文档

15 - 浏览器兼容

1.为什么会出现浏览器兼容问题？

2.主流浏览器

3.浏览器内核

4.CSS Hack (Hack 方法)

5.属性前缀法

6.CSS 优化

7.宽高自适应

8.拓展知识 - 安卓和IOS系统上CSS属性的兼容问题