CSS 陷阱

本文最后更新于4 年前，文中所描述的信息可能已发生改变。

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); 来控制层级顺序。

• 张鑫旭博文：深入理解 css 中的层叠上下文和层叠顺序
• Segmentfault 回答：Transform 引起的 z-index "失效"

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 都可以）。

CSS 深入理解 vertical-align 和 line-height 的基友关系

To Be Continued.