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: bottommiddle | top | bottom 都可以)。

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


To Be Continued.