2010-09-24 71 views
6

我有以下代碼::最後一個孩子僞類選擇在CSS和Internet Explorer

ul.myList li{ 
    border-right: 1px dotted #000; 
} 

然而,最後一個元素上,我需要刪除邊框爲我從使然工作設計最後一項不需要邊框作爲分隔符。

所以,我需要爲目標列表的最後一個孩子,所以我的CSS中我已經加入

ul.myList li:last-child{ 
    border-right: none; 
} 

正如我們都知道,在Firefox,Safari和Chrome工作正常。

問題在於,當我們在Internet網頁瀏覽,通過6至8

回答

11

所以,一些周圍挖掘後,我找到了答案:

如果瀏覽器是IE < 8,指定一個樣式表是這樣的:

<!--[if lt IE 8]> 
<link rel="stylesheet" href="css/ie_all.css" type="text/css" /> 
<![endif]--> 

而且你的IE瀏覽器的樣式表中指定以下規則:

ul.myList li{ 
    border-right: expression(this.nextSibling==null?'none':'inherit'); 
} 

nextSibling表達查看是否有後它的元素,並且如果存在繼承在噸指定的規則他默認的樣式表,如果沒有,它會應用一個新的規則。

更多的信息可以發現here

+1

+1這是可怕的,但它可能只是工作。再加上一個來爲我提出一個適用於IE的可行解決方案。 (對於IE來說,我們減去了一百萬分,讓我們首先得到這樣的黑客)。值得指出的是IE9(目前處於測試階段)可以支持它,所以你可能需要調整[如果IE]成爲IE8或只有更低。 – Spudley 2010-09-24 11:19:41

+0

感謝您的回覆,如果IE 9支持它,我不是100%。我將調整我的帖子以反映IE 8及以下版本。 – 2010-09-24 11:21:30

+1

IE9將支持它,根據他們自己的文檔..然而,可靠的是。 – Kyle 2010-09-24 11:21:41

1

爲此,您可以使用jQuery。所以,而不是依靠CSS。使用jQuery選擇器來設置最後一個元素的屬性。我明白你沒有用它來標記你的問題。

jQuery('ul.myList li:last-child').css("Key","value"); 
2

如Internet Explorer版本之前9(仍處於開發中)完全不支持:last-child選擇,我的最佳解決方案,不幸的是,是設置的最後一個元素上class和id的列表並嘗試選擇。

當然,如果留在IE不會徹底打破布局的右邊界,你可能要照原樣留下您的代碼,如果你不介意IE搞砸了渲染只是一點點。