如何使用CSS3選擇器忽略IE8？

在下面的示例中，我希望IE8能夠顯示red中的文本，但對於所有現代瀏覽器都會顯示。如何使用CSS3選擇器忽略IE8？

我知道IE8不理解像:nth-child()這樣的選擇器，所以我想出了p:nth-child(odd), p:nth-child(even) {...}來覆蓋前者的風格。

有沒有更優雅的做法呢？我知道存在條件註釋...[if lte IE 8]...，但這不是我在這個問題中所要求的。

p { 
 
    color: red; 
 
} 
 

 
p:nth-child(odd), 
 
p:nth-child(even) { 
 
    color: green; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

來源

2017-04-25 Stickers

我不清楚你爲什麼接受LGSon的答案。是的，當你特別需要隱藏IE8而不是任何其他版本時，我會推薦@media hack - [甚至我自己使用它]（http://novalistic.com/css/frontend.ie.css） - 和瀏覽器/如果你使用像Modernizr這樣的東西，但是你特別要求一個選擇器黑客的話，特性檢測是很好的，對吧？ – BoltClock

@BoltClock我只是因爲[鏈接]（http://browserhacks.com/#hack-319658f3c65762a24dc67d5ccf8cd452）在那裏發佈而標記了答案，這使我很容易找到更多選項。感謝您的意見。 – Stickers

CSS黑客是也許不是優雅，雖然他們仍然完成工作。

沒有爲IE8幾個CSS黑客，閱讀更多：http://browserhacks.com/

這裏用的就是一個，使用@media \0screen { ... }

p { 
 
    color: green; 
 
} 
 

 
@media \0screen { 
 
    p { 
 
    color: red; 
 
    } 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

另一個selector { property: value\9; }

p { 
 
    color: green; 
 
    color: red\9; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

一個小JS的手段是另一種，如果你喜歡劇本更好
var isIE8 = document.all && !document.addEventListener;

/*Set html class if IE8*/ 
 
(function(d) { 
 
    if (document.all && !document.addEventListener) { 
 
    d.className += ' isIE8'; 
 
    } 
 
})(document.documentElement);

p { 
 
    color: green; 
 
} 
 

 
.isIE8 p { 
 
    color: red; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

來源

2017-04-25 19:18:23 LGSon

你可以使用這個庫就像http://selectivizr.com/給IE更新的選擇。

來源

2017-04-25 18:39:02

使用:nth-child來定位瀏覽器是一個壞主意。

特別是如果該選擇器應用於動態收集，當您做container.removeNode(child)瀏覽器將被迫掃描所有兄弟並重新計算其使用的樣式。僅僅因爲你需要瞄準IE8，你的文檔在所有其他瀏覽器中將會變得更重。

我建議添加類主體元素（無論是在服務器或JS），說.ie8，並選擇使用它：

p { 
    color: green; 
} 

.ie8 p { 
    color: red; 
}

來源

2017-04-25 18:52:41

可以凝結:nth-child(odd), :nth-child(even)只是:nth-child(n)，這是一個保證所有元素的匹配除外:root：

p { 
 
    color: red; 
 
} 
 

 
p:nth-child(n) { 
 
    color: green; 
 
}

<p>paragraph 1</p> 
 
<p>paragraph 2</p> 
 
<p>paragraph 3</p>

然而，IE8選擇黑客通常由添加:root到每個選擇器複雜代替，其具有相同的效果開始時，甚至加入特異性的相同量的。

來源

2017-04-26 04:30:57 BoltClock

如何使用CSS3選擇器忽略IE8？

回答

相關問題