CSS中涉及到的浏览器兼容性总结（不断更新）

1、flex弹性布局：IE10+

★ 2、box-sizing（CSS3属性）：IE9+，IE8中加上前缀-ms-也支持（-ms-box-sizing）

3、outline：设置了!doctype的IE8/8+

4、min/max-width：IE7/7+

5、图文混排时，文字的选中背景反应内容区域范围的精确程度：

•    图文混排原图
•   鼠标选中所有区域时（Chrome）
•   鼠标选中所有区域时（IE/Firefox）
• 额外补充一点：用content生成的内容是无法被鼠标选中的！

6、line-height在不同浏览器下的默认值：Chrome为normal，FF（Firefox）/IE为18px

• normal具体值的计算是跟着用户的浏览器走的，且与元素字体关联，即依赖于当前浏览器设定的初始font-size值。由不同字体的行高除以100而得。

★ 7.的src属性为本地图片的路径的写法：

• Chrome和IE均支持本地图片的绝对路径
• FF写绝对路径是无法识别的，需要在路径前面加上"file:///"，且路径写为"file:///+绝对路径"的形式Chrom和IE也是支持的
• 故此，如要引入本地路径的图片，路径前面最好拼接上"file:///"以不同保证浏览器均能显示出图片

8.双冒号伪元素：IE8+（不包括IE8）

9.滚动容器的padding-bottom表现：Chrome下正常显示，FF和IE下会忽略padding-bottom值。（这一现象的本质原因是：Chrome浏览器是子元素超过content box尺寸触发滚动条显示，而IE和FF浏览器是超过padding box尺寸触发滚动条显示）

【tips】所以不要通过padding给滚动容器添加底部留白了哦，而是要通过margin~

10.border-style: dashed：在Chrome和FF下，颜色区的宽高比为3:1，颜色区和透明区的宽度比是1:1；IE下，颜色区的宽高比是2:1，颜色区和透明区的宽度比例也是2:1。

11.border-style: dotted：在Chrome和FF下，虚点实际上是小方点；IE下为小圆点（规范中明确表示是个圆点）。

12.border-radius：IE9/9+支持。

【tips】结合11和12来看，若要在IE8及以下实现圆角边框就只能采用以下图例的方式了：