0

簡単なページ：

<!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か？

4

3 に答える 3

2

これはFirefoxのバグです。ここでその解決策を追跡できます：https ：//bugzilla.mozilla.org/show_bug.cgi？id = 835873

于 2013-01-29T18:01:18.377 に答える
0 
please use this css

     <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;
        float:left;
        margin:1px;
        height:50px;
        line-height:50px;
    }

</style>
于 2013-01-29T17:05:00.120 に答える
0

verical-align、からbaseline、middleまたは両方の値を変更します。

編集：<button>タグの使用を検討してください

于 2013-01-29T16:30:34.297 に答える