html - HTML の 'hr' が半ピクセル余分に表示されるのはなぜですか?

Question

これは標準の HTML 'hr' タグにすぎませんが、線が奇妙な余分なピクセルで表示されています。私の唯一のCSSは次のとおりです。

hr {margin:0%;line-height: 100%;}

どうやら問題の画像を含めるのに十分な担当者がいないようですので、私の説明から外さなければなりません.

score 2 · Accepted Answer

CSS ソリューション:

hr {
    border: none;
    background-color: #000;
    color: #000;
    height: 1px;
}

score 1 · Accepted Answer

hr タグは、高さ 1px の空の要素としてレンダリングされ、インセットの境界線スタイルが適用されます (hr の高さを数ピクセル変更して、意味を確認してください)。挿入された境界線がレンダリングされる方法により、余分なピクセルが左側に表示されます。追加する場合:

hr { border-left: none; }

...その後、余分なピクセルなしでデフォルトの hr のインセットの外観を維持できます。ボーダースタイルをベタ塗りにしたり、背景色を黒にしたりすると、時間が暗くなりすぎる可能性があります。私は上記のアプローチの繊細さを好みます。

score 1 · Accepted Answer

CSS を使用したクロスブラウザーソリューション:

hr { height: 1px; background-color: #000; border: 0 none; }

jsFiddle:

5 に答える 5