CSSの境界線を使用してCSSの概要

StackOverflow https://stackoverflow.com/questions/742163

  •  09-09-2019
  •  | 
  •  

質問

悲しいことに、CSSのアウトラインは、IE7ではサポートされていませんので、私は境界線を使用してこだわっています。しかし、ページ上の任意の要素に境界線を追加すると、部屋を取り、おそらくページをシフトします。

私は2ピクセルの境界線を追加している場合は、私は-2pxマージンを設定し、リスト項目が左に移動し、「マージン：オート」として

、それは敷居、完璧ではない。それには本当にネジ

あなたがここに例を見ることができます：

の<のhref = "のhttp：//paul.slowgeek。 COM / nodeSelector /テスト/ simple.html」のrel = "nofollowをnoreferrer"> http://paul.slowgeek.com/nodeSelector/tests/simple.html の

の<のhref = "のhttp：//paul.slowgeek。 COM / nodeSelector /テスト/ center1.html」のrel = "nofollowをnoreferrer"> 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つのピクセルになります。しかし、私がやった場合：

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

のFirefox 3に、ページが正確に同じ高さになると素子が同じ位置になるであろう。私は、この動作は、クロスブラウザを仕事をしたい。

基本的に、どのようにCSSのアウトラインの効果を得るために、CSSの境界線を使用することができますか？

役に立ちましたか？

解決

それはあなたが心配している効果をホバーだし、あなたの背景が均一な色である場合は、

単に非ホバーボーダーが背景色に要素をotの設定してから、ちょうどホバーの色を変更します。だから、要素はあなたが境界線が常にそこにいるために調整するためにパディングを小さくする必要があるでしょうが、常に同じ大きさです。

そう 代わりの

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 / の

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top