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)

解决方案:默认的 verticacl-align 属性为 baseline,我们只需要**为 img **添加 verticacl-align: bottommiddle | top | bottom 都可以)。

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


To Be Continued.