z-index的IE8漏洞：

Question

後，這是在IE8已知的錯誤，看看最後一個錯誤的位置：
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

現在，打了一下，用一個簡單的例子，我發現這個（測試它使用IE8）：
http://jsfiddle.net/AjCPM/

<div id="target"> 
    <div>div</div> 
</div> 


#target { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    z-index: 1; 
} 
#target>div{ 
    background: red; width: 200px; height: 200px; 
    position: relative; 
    z-index: 0; 
} 
#target:before { 
    top: 0; left: 10%; width: 100%; height: 100%; background: cyan; 
    content: "after"; 
    position: absolute; 
    z-index: 10; 
} 

IE8呈現青色矩形（：後）紅色矩形的下方，即使當它具有較低的z索引。
而現在棘手的部分：
將#target> div的z-index從0更改爲-1，並且voilá！它解決了！

所以我現在用了很多z-index解決了我的問題：-1;
但我對此感到不安。

你知道更好的解決方案嗎？

我使用：僞元素後，因爲我有一個產品的列表，並且我想要添加一個圖像的時候，它的類'賣'例如。
我可以在服務器中創建一個新的html元素，但我認爲使用：after是正確的語義解決方案。
問題是，我有點偏執了一點：現在僞元素現在你認爲最好避免它嗎？

Answer 1

我使用不同的方法來解決這個問題：

每個產品的HTML包含可以定位在主圖像的「售完」的旗幟。默認情況下，CSS隱藏這個元素。如果包裝「產品」DIV包含一類「soldOut」，則CSS將覆蓋默認聲明並顯示橫幅。

<div class="product soldOut">         
    ... product html ... 
    <div class="soldOutBanner"></div>  
</div> 

CSS：

.soldOutBanner { 
    display:none 
} 

.soldOut .soldOutBanner { 
    display:block; 
    width:133px; 
    height:130px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    z-index:10; 
    background-image:url(../SoldOut.png); 
} 

Answer 2

先回答你的最後一個問題，只要你不需要支持完全缺乏生成的內容（http://caniuse.com/#feat=css-gencontent）支持任何瀏覽器，那麼你不應該需要避免它。但是，由於您注意到這是一個已知的錯誤，因此您應該小心。

在這個特定的例子中，我可以想出三種不同的方法來解決這個bug。這些對你是否有用取決於你的實際使用情況。

1. 使用:after代替:before並從孩子div定位：http://jsfiddle.net/AjCPM/24/

   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #target>div{ 
       background: red; 
       width: 200px; 
       height: 200px; 
   } 
   
   #target:after { 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

2. 後添加到孩子div代替父：http://jsfiddle.net/AjCPM/26/

   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #target>div{ 
       position: relative; 
       background: red; 
       width: 200px; 
       height: 200px; 
       z-index: 0; 
   } 
   
   #target>div:before{ 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

3. 使用包裝元素（通常是因爲你已經有一個）的基礎造型適用於：http://jsfiddle.net/AjCPM/29/

   <div id="target"> 
       <div id="wrap"> 
        <div>div</div> 
       </div> 
   </div> 
   
   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #wrap>div{ 
       position: relative; 
       background: red; 
       width: 200px; 
       height: 200px; 
       z-index: 0; 
   } 
   
   #wrap>div:before{ 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

基本上，當面對這樣的瀏覽器的理解上的差異，最好的辦法是嘗試你的方法重新排列，以找到可以跨瀏覽器使用的東西。

Answer 3

有關：before和之後的簡要說明：在IE8中的選擇器之後：爲了讓它們工作，您需要聲明一個DOCTYPE。請參閱this W3Schools page。我猜你已經做到了這一點。

查看答案to this question如果你還沒有（我想你可能有）。

基本上，底線是它是一個錯誤。您使用-1的z-index的解決方案不是理想的，但然後再次沒有解決該錯誤將是理想的。我不認爲使用-1的z-index是過分擔心的事情，除非它在佈局中引起問題。如果你非常關心，那麼你爲什麼不只是針對IE8的修復。例如，你可以使用像這樣的條件註釋：

<!--[if IE 8]> 
<style> 
#target>div{ 
    z-index:-1; 
} 
</style> 
<![endif]--> 

像你遇到的行爲是許多開發人員鄙視IE瀏覽器的原因之一。在很多情況下，包括這個，都沒有完美的解決方案。你可以：

1. 停止使用:before和:after選擇&調整你的HTML/CSS的東西，是IE8友好。
2. 使用條件註釋或JavaScript發佈專門針對IE8的修復
3. 請黑客攻擊，並試圖找到另一個HTML/CSS組合的作品 - 但沒準它會不會比你的負面z-index解決方案更理想。

不幸的是，在許多情況下，沒有像「語義正確」的跨瀏覽器網站這樣的事情。

我的兩分錢是創建一個IE8樣式表，並使用上面顯示的條件註釋加載樣式表。在樣式表中，使用您提出的z-index: -1解決方案。許多網站使用以IE爲目標的樣式表。

Answer 4

不需要設置z-index ES，只要確保你使用:after代替:before（demo）：

#target { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 
#target>div{ 
    background: red; 
    width: 200px; 
    height: 200px; 
} 
#target:after { 
    content: "after"; 
    position: absolute; 
    top: 0; 
    left: 10%; 
    width: 100%; 
    height: 100%; 
    background: cyan; 
}​ 

由於生成的內容來#target後，自然會堆積之上。

BTW產品是否被「出售」是語義信息，因此正確的語義解決方案是將其包含在HTML中，而不是通過CSS添加圖像。