0

HTML select タグの padding-left が input タグよりも大きいのに、両方に同じスタイルが適用されているのはなぜでしょうか?

これは、Firefox 17、Chrome 23、IE 8、および IE 9 で再現可能です。Opera のみが、同じ padding-left を持つ両方の要素を表示します。

リセット スタイル シートを使用しているときに、同じ問題が発生します。入力と選択のマージンとパディングは 0 で、境界線はありません。box-sizing: border-box が使用されます。

以下は Firefox のスクリーンショットです。

これはFirefoxのスクリーンショットです .

そしてコード例（フォームアクションなどはありません）：

<!doctype html>
<html>
<head>
    <title>input and select - padding-left</title>
    <style>
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box; 
    }

    input, select {
        width: 150px;
        padding: 0;
        margin: 0;
        border: none;
        height: 30px;
        font-size: 16px;
    }



    body {
        background-color: #007;
        font-size: 36px;
    }

    div {
        margin-left: auto;
        margin-right: auto;
        width: 140px;
    }
    </style>
</head>
<body>
    <form>
        <div>
            <input value="Hello input" /><br/>
            <select size="1">
                <option>Hello select</option>
            </select>
        </div>
    </form>
</body>

Opera はすべてを希望どおりに表示するため、padding-left に別の値を割り当てると、Opera でずれて見えます。したがって、別の解決策があることを願っています。

4

1 に答える 1

-1

私はこれをチェックしていませんが、高さと同じ（つまり30px）line-heightでを試してみることができます。inputselect

于 2012-12-05T19:52:22.410 に答える