CSS 的奇妙 Bug
FAQ
Margin 塌陷
DEMO: Margin Collapse
See the Pen Margin Collapse by YunYouJun (@YunYouJun) on CodePen.
父子间
添加 overflow: hidden;
兄弟间
添加 float:left;
transform 后 z-index 属性失效
Demo:
See the Pen transform vs z-index by YunYouJun (@YunYouJun) on CodePen.
原因主要是 transform 新创建了层叠上下文，影响了正常的 z-index。
解决方案：添加 transform-style: preserve-3d;，使之变成 3d 显示方式。再通过 transform: translateZ(-1px); 来控制层级顺序。
img 与父级元素下边框存在空隙
Demo:
See the Pen img space with father by YunYouJun (@YunYouJun) on CodePen.
可以看到在底部，背景的红色透了出来。
其主要原因是文字默认的行高所产生的问题。（参见 demo）
解决方案：默认的 vertical-align 属性为 baseline，我们只需要为 img 添加 vertical-align: bottom （middle | top | bottom 都可以）。
To Be Continued.
