添加了额外的一行:当使用HTML5 DTD时(相对于XHTML1)，在伪元素之后

Question

很长一段时间以来，我一直在使用一种非常好的列生成方法，其中我可以使用类.boxcontainer和子.box元素的div，并在.boxcontainer上使用:after伪元素，我的.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总是与子.box元素完全齐平。

然而，在HTML5中的一个新项目中，我发现在合理的.box元素下面似乎添加了一行额外的代码。您可以在此处看到一个示例：http://jsfiddle.net/RZQTM/1/-单击Fiddle Options并将DTD更改为其他任何内容，您就会看到我的意思——一个橙色的"带"出现在对齐的蓝色框下面。

我认为这是因为:after伪元素中的某些内容被渲染得几乎像是一行额外的内容，但我不知道如何修复它。如果有任何关于如何删除框下多余空间的提示，我们将不胜感激。

Answer 1

我用来让这条额外的行消失的技巧是在父行上应用line-height:0;，并将CCD_ 11重置为1.2em或您设置的任何线高。垂直对齐：顶部；/*或底部*/on：在元素最终吞下任何剩余的垂直间隙之后。

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

Answer 2

使用额外标记和CSS表单元格的解决方案

我有时会使用以下内容。在HTML中，我添加了一个额外的元素div.spacer:

<div class="boxcontainer">
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
    <div class="spacer"></div>
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
    <div class="spacer"></div>
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
    <div class="spacer"></div>
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
</div>

对于CSS，我对父容器使用display: table，然后对.box子元素使用display: table-cell：

.boxcontainer {
    background-color: orange;
    display: table;
    width: 100%;
}
.box {
    vertical-align: top;
    display: table-cell;
    background-color: blue;
    color: white;
    font-family: Trebuchet MS;    
}

示范小提琴是：http://jsfiddle.net/audetwebdesign/xWfk2/

在内部，CSS将.spacer重新用作同级表单元格，并且由于.box元素具有固定的宽度，因此默认间距趋于均匀。

如果.spacer元素具有有用的用途（具有真实内容），并且您有其他理由使用表格单元格，例如垂直定位控制等，则这种方法是理想的。