背景画像にマイナスのマージンを使用して箇条書きを表示する問題（IE6と7）

Question

ここでの主題は、タイトル要素の左側の溝に画像を表示するための箇条書きリストの負の余白の使用です。 Simplebits articleこれは見出しの良い解決策である理由を説明しています（これは通常、同じ結果をまったく持たない列をシフトするのに通常使用されます）。記事のコメントは、IEの問題それは解決策はありませんが、これが原因です。

元の形式では、スタイルはデータURL（IE6/7はまったくサポートしていません）を使用しています。したがって、私は2つのスタイルを最新のブラウザ用に、もう1つはIE6/lt-ie8class使用して：最近のブラウザ

 

/* IE6/7 dont display the data URL. In modern browsers this works fine. */ 

.linked-list-item { 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAABN0lEQVQYGa3BuyuGYRjA4d/9PC8+RU6RUmRAya5kNFjMNjPegRTeA/8AoWQgOYRkkoT64itJSHIugwwMYsFiYHD7XoTR4LrgfzgYwMESMTg4OBg+CL9ZLD8sX1zOuWWZKiJlDBNnkGLAkrSIxuIFU4X3RqmhQTTluejIeRWlnqQm0fzGcL3n1FvJ3JQX0fKNYCrYDAdicZRcSMihfxRe9e50LrozKWqevD3/pGvFX+gYiiku7GckwuPgyt8Od9tH0zX11D/w1nqGvYlgPPuRPugv0O5EsBVc+DvZvaKpb23z4Wqw5M25k1lKI+TJS/pdbVvLWOmIKGPcpN21znqrzdPmQa75UMGZqFVR+oFKuRWVN1EuKSHJEimnmhzAEKnHpY6IJckifHIAyw/DN4NF+CRYHCzCX7wDrWZoQuKsx98AAAAASUVORK5CYII=) no-repeat 0 4px; 
    padding-left: 25px; 
    margin-left: -25px 
} 
 

ため

が

1. CSSは、これはどのようなコードが表示されます（それがmargin- ノートで「最近つぶやいたため26px上マージンが画像を表示します'その下にある ）：IE6/7

2. CSSのみ

 

/* 1. IE6 clips this if you don't add 'float:left' and 'position:relative' 
* 
* 2. { Needed to display the background 
* 3. { image in IE6 [see this thread: http://i.via.dj/EThi]. */ 

.lt-ie8 .linked-list-item { 
    background: url(link-icon-black-16x16.jpg) no-repeat 0 2px; 
    padding-left: 25px; 
    margin-left: -25px; /* 1. */ 
    float: left; /* 2. */ 
    position: relative /* 3. */ 
} 
 

これは弾丸画像（float: leftとposition: relativeの添加後）を表示するが、のマージンh2見出しが右にスライドして箇条書きのタイトルと重なるまで：

私は、このような大規模なデータURLを使用すると、余分のhttp避けるために、それ実際に価値がある要求を、それがここでの問題はないだろうかんが0

（最近のブラウザのための）コードの最初のセットはうまく動作します。

（float: leftとposition: relativeを添加しない）元の形態では、IE固有のマークアップが機能しないが：IE6クリップ負のマージンの内部だ要素の一部、それは画像の弾丸が表示されません意味それは表示するつもりです。

このスタックオーバーフローthreadは、実際には、左にクリップされている要素を浮動させ、position: relativeを追加することを提案しています。

上記のコードはIEの場合にのみ、this jsfiddleのHTMLとCSSで表示されます。このlinkで動作しているサンドボックスサイトを見ることもできます：IE6と7で試してみてください。 IE7では

1、以下の要素のマージンが崩壊し、箇条書きの要素のと重複するが、ブラウザが箇条書きの見出しの幅と混同しているように見えるとして、それは、さらに悪いですしています

2。マージンもアップスライドしたもののIE6では、わずかに良いです：

それは本当にIE6/7のみの問題に影響を与えるCSSを解決するためにやり過ぎだろうと私は追加のマークアップでこれに対処するには消極的だ

スタイリングは非常に少数の訪問者を対象にしています（私は、これらのブラウザを使用する貧しい人々に対応するためにここでかなり問題になるでしょう...）

私が考えることができるすべての組み合わせoverflow、clear、displayなどはうまくいきませんでした。この問題を主張すると、主に列に関する問題が発生します。実際には全く同じではありません。

いつものように、どんな提案も歓迎します。

Answer 1

OK、I はソリューション-使用left代わりのmargin-leftは（まだ当然の負の値、と...これは崩壊マージンの問題を解決し、bulletted要素をフロートする必要がなくなりました。

ここです固定CSS：

 

.linked-list-item { 
    background: url(http://cdn.donaldjenkins.com/media/icons/bullets/link-icon-black-16x16.jpg) no-repeat 0 2px; 
    padding-left: 25px; 
    left: -25px; /* IE6/7 position the element wrongly if you don't add 'position:relative' */ 
    position: relative; 
} 
 

そして、これはそれがIE6のために結果です：

IE7は同じになります。

あなたが見ることができるように、箇条書きの見出しの下の要素のための26pxのマージンが再び現れました。私と同じ極端に行きたくない、データURLを必要としない人なら、どこでもこのコードを実際に使用できます。これは現代のブラウザでも機能します。

---

編集2012年2月26日：私はmy siteに行ったように、上記のコードと並んで近代的なブラウザ側のデータ・URLベースの箇条書きスタイルを実行して、上記に次の2つの属性を追加するために私を必要とコード、私は並列に実行されるコードの2セットを持っているように：

 


<!-- 1. Modern browsers --> 

.linked-list-item { 
    background:url(data:image/png;base64[…morecode]) no-repeat 0 4px; 
    padding-left:25px; 
    margin-left:-25px 
} 

<!-- 2. Targets IE6/7 only --> 

.lt-ie8 .linked-list-item { 
    background: url(http://cdn.donaldjenkins.com/media/icons/bullets/link-icon-black-16x16.jpg) no-repeat 0 2px; 
    padding-left: 25px; 
    left: -25px; /* IE6/7 position the element wrongly if you don't add 'position:relative' */ 
    position: relative; 

<!-- a. Ensures background image is always visible in IE6 --> 
    height: 100%; 

<!-- b. Offsets the -25px negative margin in the modern browsers code --> 
    margin-left: 0; 
} 
 

Answer 2

古いエクスプローラでCSSをコーディングするときに、float:whateverと書くとすぐにdisplay:inlineを追加すると、余白の問題が修正されます。しかし、これがあなたの具体的な問題に役立つかどうかはわかりません。

1ピクセルの上下のパディング/白い枠線を使用すると、マージンの崩壊を防ぐことができます。

たぶん、あなたはブロックフォーマット文脈で遊ぶことができます：

overflow: hidden; 
zoom: 1; 
position: relative; 

はh2.sidebar-titleはh2.linked-list-itemとの干渉を無効にするclear: bothを持っていないでしょうか？