4

私はかなり単純な cssを含む単純な htmlページを持っていますが、それは私を夢中にさせます - 私はここで何が起こっているのかまったく理解していません(元のタスクは、modernizr を使用して単純な連絡先フォームを作成することですが、すべてを削除しました) :

<html>
<head>
    <style>
        body {
            font-size: 16px;
            line-height: 26px;
        }

        label {
            float: left;
            margin-top: 4px;
        }

        input {
            border: 1px solid #ccc;
            margin: 4px;
        }

        input:focus {
            border: 2px solid #900;
        }
    </style>

</head>
<body>
    <label>1:</label><input id="1" /><br />
    <label>2:</label><input id="2" /><br />
    <label>3:</label><input id="3" /><br />

</body>
</html>

ラベルと入力ボックスを含む 3 つの行の左余白が増えており、入力にフォーカスを設定すると、下の行は (少なくとも Chrome と FF では) 元に戻ります。なんで？

ここで、事実上すべてのCSS プロパティを削除すると、事態はさらに奇妙になります。

  1. 上記のオリジナルはここにあります。
  2. 本文の行(またはline-height: 26px; part!!のみ)を削除すると、左マージンが消えます (なぜですか?)、ここを確認してください。
  3. input:focus行を削除すると、ジャンプが発生しなくなります (なぜですか?) 。ここを確認してください。
  4. 境界線を削除した場合: 1px solid #ccc; 入力から、余白がなくなりました (なぜ???)、こちらを確認してください。

また、他の相互依存関係もあります。これは jsfiddle やその他のオンライン ツールでは発生しませんが、ローカルで簡単に再現できます。

要するに、全体の動作は私には完全に異質に思えます。CSS シャーロック ホームズが、ここで何が起こっているのかを明らかにしてくれることを願っています。

4

2 に答える 2