css - 添加了额外的行 :after pseudo-element when using HTML5 DTD (versus XHTML1)

Question

很长一段时间以来，我一直在使用我偶然发现的一种非常好的列跨越方法，其中我可以使用类 .boxcontainer 的 div。和 child .box元素，并使用 :after .boxcontainer 上的伪元素, 我的 .box列在整个页面上合理且均匀地对齐。以下是最重要的定义:

.boxcontainer {
    text-align:                 justify;
    -ms-text-justify:           distribute-all-lines;
    text-justify:               distribute-all-lines;
    background-color:             orange;
}

.boxcontainer:after {
    content:                    '';
    display:                    inline-block;
    width:                      100%;
    height:                     0px;
    font-size:                  0px;
    line-height:                0px;
}

我以前的大部分元素都是XHTML1 Transitional(我后来了解到，与其他 DTD 相比，它使用了一种有限的怪癖模式)，并在 XHTML1 父级中使用此方法 .boxcontainer总是完美地包裹在 child 身上 .box元素。

但是，在 HTML5 中处理一个新元素时，我发现在合理的 .box 下方似乎添加了额外的一行。元素。您可以在此处查看示例:http://jsfiddle.net/RZQTM/1/ - 单击 Fiddle Options 并将 DTD 更改为几乎任何其他内容，您就会明白我的意思 - 橙色“带”出现在对齐的蓝色框下方。

我认为这归因于 :after 中的某些东西伪元素的呈现几乎就像是额外的一行内容，但我不知道如何修复它。非常感谢收到有关如何移除盒子下方多余空间的任何提示。

Answer 1

我用来使这条额外的线消失的技巧是在 parent 上应用 line-height:0; ，并将 line-height 重置为 1.2em 或您设置的任何行高。vertical-align:top;/* 或 bottom */on :after 元素结束时会吞下所有留下的垂直间隙。

一个例子:http://codepen.io/gcyrillus/pen/dlvCp