浏览器兼容性问题记录

1、如果容器可以滚动，在IE和Firefox浏览器下是会忽略padding-bottom值的。

本质：Chrome浏览器是子元素超过content box 尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box 尺寸触发滚动条显示。

image.png

解决方案：使用子元素的margin-bottom来实现滚动容器的底部留白。

2、IE浏览器不支持伪元素的display值为list-item

在css的世界中，块级盒子负责结构，内连盒子负责内容，但是半路杀出个list-item，其默认要显示项目符号的，一个盒子解决不了。造物主灵机一动，给list-item再重新命名一个附加盒子，学名为“标记盒子（marker box）”, 专门用来放置圆点、数字这些项目符号。IE浏览器下伪元素不支持list-item或许就是无法创建这个“标记盒子”导致的。

3、FireFox浏览器，缺省src的img标签不是替换元素，而是一个普通的内联元素。

不会使用替换元素的尺寸规则（固有尺寸、HTML尺寸、CSS尺寸），类似的内联元素，宽高会无效。
解决方案：img { display:inline-block }

4、在Chrome浏览器下，所有元素都支持content属性，而其他浏览器仅在::before/::after伪元素中才支持