ボタンと行の高さのDOCTYPE違い

Question

私は（私はデモの目的のためにインラインを使用）次のHTML/CSSを持っている：あなたはHTML5のDOCTYPEの下でコードを実行した場合

<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> 

、ボタンが縦に中央に整列されます（私が期待したもの）。

ただし、HTML4 Transitional doctypeで実行すると、ボタンが上に浮かびます。ボタンの後に&nbps;（または任意のテキスト）を追加することです。なぜこのようなことが起こるのか？

Answer 1

2つの異なるdoctypeページで1つのレイアウトを使用しますか？そうでない場合は、問題は何ですか？

ただし、ここにいくつかの相違点があります。http://www.w3.org/TR/html5-diff/