CSSの枠線を使用したCSSの概要

Question

悲しいことに、悲しいことに、CSSのアウトラインはIE7ではサポートされていません。しかし、ページ上のどの要素にもボーダーを追加すると、ページが移動する可能性があります。

2pxのボーダーを追加している場合、リスト項目が左に移動するときに2pxの余白を設定します。それは本当にうまくいきません。

あなたがここに例を見ることができます。たとえば

http://paul.slowgeek.com/nodeSelector/tests/simple.html

http://paul.slowgeek.com/nodeSelector/tests/center1.html

を、ページが持っていた場合：

<div> 
    <p>Lorem Ipsum</p> 
</div> 

をそして私がやった：

<div> 
    <p style="border: 5px solid red">Lorem Ipsum</p> 
</div> 

ページが10ピクセル大きくなり、p要素が5ピクセルインデントされます。しかし、私がした場合：

firefox 3では、ページは全く同じ高さになり、要素は同じ位置になります。私はこの動作がクロスブラウザで動作するようにしたい。

基本的に、CSS境界を使用してCSSアウトラインの効果を得るにはどうすればよいですか？

Answer 1

あなたが心配している背景が均一な色であれば、単に要素を背景色に設定し、ホバー上の色を変更するだけです。したがって、要素は常に同じサイズですが、境界線が常に存在するようにパディングを小さくする必要があります。

ので の代わりに使用している場合はさておき、として

a p {padding: 10px;} 
a:hover {border: 5px solid red;} 

使用

a p {border: 5px solid white;padding:5px} 
a:hover p {border-color: red;} 

：リンクまたは入力以外の任意の要素の上に置くと、その後何の効果が見られませんつまり、多くの人がまだ使用しているie6です。しかし、あなたはそれを修正するためにie7スクリプトを使うことができます：http://code.google.com/p/ie7-js/