按钮和行高Doctype的区别

Question

我有以下html / css（我使用内联进行演示）：

<div style="background-color:#e00; height:30px;">
    <div style="float:left;line-height:30px;">
        <button style="height:20px;line-height:normal;">Button 1</button>
    </div>

    <div style="float:right;line-height:30px;">
        <button style="height:20px;line-height:normal;">Button 2</button>
    </div>
</div>

如果你在HTML5 doctype下运行代码，按钮将在中间垂直对齐（我所期望的）。

但是，如果您在HTML4 Transitional doctype下运行它，按钮将浮动到顶部。解决此问题的方法是在按钮后添加＆amp; nbps;（或任何文本）。知道为什么会这样吗？

Answer 1

您打算在两个不同的doctype页面上使用一个布局吗？如果没有，那么问题是什么？

但是，这里有一些关于差异的解读：http://www.w3.org/TR/html5-diff/