這個n-child選擇器如何在IE 8中工作？

這是我的div容器：這個n-child選擇器如何在IE 8中工作？

#randomid { 
margin-right:40px; 
margin-bottom:35px; 
float:left; 
}

而且有12個元素內側（2行）。而且我需要從最右邊的（每六分之一）中刪除邊距。

所以我得到這個僞選擇：

#randomid:nth-child(6n+6) { 
    margin-right: 0; 
}

如何我可以在IE 8這項工作不使用JavaScript？

來源

2013-02-12 Jean

它不能在IE8中工作，但可以在其他瀏覽器中使用？ – 2013-02-12 15:48:03

這是正確的。 – Jean 2013-02-12 15:49:03

向這些元素添加一個類不是一個選項？ – 2013-02-12 15:51:08

而不是使用這樣一個複雜的CSS選擇器，缺乏在舊版瀏覽器缺乏支持的缺點，有可能需要研究的解決方法。我已經提供了一個小例子，說明如何在不使用選擇器的情況下實現我所期望的結果。

下面的示例將在每行上有六個元素，每個元素都有一個邊距，但在第一個元素之前或每行最後一個元素之後沒有空白。

標記：

<div class="foo"> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="bar">A</div> 
    <div class="clear"></div> 
</div>

CSS：

.foo { 
    background-color: #ccc; 
    width: 180px; 
    margin: 0 -10px; 
} 

.bar { 
    background-color: #888; 
    float: left; 
    margin-left: 10px; 
    width: 20px; 
} 

.clear { 
    clear: both; 
}

Live example

它可能不是正是你想要的，但它至少會工作作爲開始poi nt讓你適應並進一步發展。

更新：

有更好的方法來清除浮動，因爲在我的例子使用了可以用來代替一個額外的元素的（我用它只是爲了簡單）。如果有興趣，這裏是一個SO question。

來源

2013-02-12 16:24:49

完美的解決方案 - 謝謝！ – 2013-04-17 05:57:11

您可以使用selectivizr。它是一個JavaScript實用程序，它模擬Internet Explorer 6-8中的CSS3僞類和屬性選擇器。只需將腳本包含在您的網頁中，selectivizr將完成剩下的工作。

http://selectivizr.com/

或者

您可以先用胎和「+」效仿第n個孩子，例如：

tr>td:first-child + td + td + td + td + td + td + td + td{background-color:red}

是選擇第9列，就像第n個孩子（9），並在IE瀏覽器上運行

來源

2013-02-12 16:00:57

實際上有一個很好的伎倆，將使這項工作完全跨瀏覽器。

爲您的包含容器設置一個寬度，以便您儘可能適合所有子元素，儘管最後一個元素的邊距位於右側。

#randomidContainer { 
    width: 840px; 
}

然後你只需換行容器放入另外一個，你用做肚裏例如像這樣的伎倆：

#randomidOuterContainer { 
    width: 800px; 
    border: 1px solid #000; 
    overfliw: hidden; 
}

這將（在某種程度上）神奇地讓你內心的浮動元素儘管在右邊有額外的邊距可能不適合你的像素完美的佈局，但在一條線上很好。

來源

2013-12-03 14:49:11

這個n-child選擇器如何在IE 8中工作？

回答

相關問題