在背景圖像中使用負邊距來顯示子彈的問題（IE6和7）

Question

這裏的主題是在項目符號列表中使用負邊距在標題元素左側的溝槽中顯示圖像：我發現Simplebits article這解釋了爲什麼這是一個很好的標題解決方案（它通常用於轉移列，但根本沒有相同的結果）：文章中的評論也值得關注，因爲它們涉及IE問題這會導致 - 儘管沒有解決方案。 （IE6/7根本不支持），所以我同時應用了兩種風格，一種用於現代瀏覽器，另一種用於IE6/7，使用lt-ie8class：

1. CSS的現代瀏覽器

 

/* 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 
} 
 

這是什麼代碼顯示（其顯示圖像在與容限記爲「最近啾啾的26px邊距'標題下方 ）：

2. CSS爲IE6/7只

 

/* 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標題已向右滑動以與項目標題重疊：

第一組代碼（現代瀏覽器）效果很好，儘管我不知道用這麼大的數據網址是否真的值得避免額外的http請求，但在這裏，這不是問題。

原始形式（不包括float: left和position: relative），IE專用標記不起作用：IE6剪切負邊界內部的元素部分，這意味着它不會顯示圖像項目符號它的意思是顯示。

該堆棧溢出thread實際上建議將正在被剪切的元素浮動並添加position: relative。

您可以在this jsfiddle的行動中看到HTML和CSS，僅適用於IE的上述代碼。你也可以在這個link看到一個沙箱網站在運行：在IE6和7中試用它，你會看到下面的問題。

1.在IE7中，該元素的保證金低於已坍塌，並與項目符號元素的重疊，但它更糟糕，因爲瀏覽器似乎是困惑，項目符號標題的寬度：

2。在IE6它稍微好一點，雖然幅度有所下滑達也：

我不願意使用額外的標記來解決這個問題，因爲這將真的是矯枉過正解決的IE6/7唯一的問題影響到CSS造型只針對極少數遊客（因爲我在這裏會遇到一些麻煩，以迎合那些使用這些瀏覽器的窮人......）

儘管如此，我可以想到的任何和所有組合overflow,clear,display等剛剛沒有工作，並谷歌搜索這個問題主要是列出問題，根本不一樣。

歡迎任何建議，一如既往。

Answer 1

OK，我發現解決方案使用left代替margin-left（仍然爲負值，當然...這樣就省去了飄起了採用項目符號元素，解決了崩潰保證金問題。

這裏的固定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日：運行與上面的代碼的現代瀏覽器並排數據，基於URL的子彈風格，我做了my site，要求我到下面的兩個屬性添加到上面代碼，讓我有兩套並行運行代碼上：

 


<!-- 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已經clear: both禁用與h2.linked-list-item的干擾？