簡単なページ:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#btn, #btn2
{
border: solid 5px #FFA354;
background-color: #FFDB82;
width: 100px;
}
#btn { min-height: 50px; }
#btn2 { height: 50px; }
</style>
</head>
<body>
<form method="post" id="oogaboogabooga">
<input type="submit" id="btn" value="btn" /><input type="submit" id="btn2" value="btn2" />
</form>
</body>
</html>
OperaとChromeでは期待どおりにレンダリングされます(同じ2つのボタンが隣り合っています)が、Firefox 18.1は、ほとんどの場合、境界サイズと同じ差で最初のボタンを2番目のボタンよりも低くレンダリングします。display: block
または最初の設定float: left
を行うと、上部の空のスペースは消えますが、内部のテキストは位置がずれており、垂直方向に本来よりも高くなっています。min-heightを使用すると、境界線のサイズを無視して、下の余白または何らかのパディングを使用してテキストが配置されるようです。
なぜこうなった?それはFirefoxのバグですか、意図された機能ですか、それともいくつかの標準の異なる解釈ですか?Firefoxに、使用中に最初のボタンを2番目のボタンと同じようにレンダリングさせることはできますmin-height
か?