CSS3在IE9上的優雅降級

我正在通過CSS3爲丹尼爾Cederholm的網頁設計師。CSS3在IE9上的優雅降級

我在企業環境中，當然必須考慮瀏覽器至少回到IE7（如果不是IE6！ - eek！）。

我正在通過航行月球示例（從第36頁開始）。

作者正在討論如何在CSS中使用回退值來優雅地降級。

到目前爲止這麼好。我在船上，只是想給它一個鏡頭。

問題是，當我通過在IE 9上的例子，我得到了一些奇怪的結果。

這裏的<body>標籤爲我的網頁內容：

<ul id='nav'> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul>

正如你所看到的，這是真的基本。

這裏的CSS我試圖使用：

body { 
    background: #000; 
} 
ul#nav { 
    float: right; 
    padding: 42px 0 0 30px; 
} 
ul#nav li { 
    float: left; 
    margin: 0 0 0 5px; 
} 
ul#nav li a { 
    font-weight: bold; 
    padding: 5px 15px; 
    text-decoration: none; 
    color: #cccccc; 
    color: rgba(255, 255, 255, 0.7); 
}

當我在Safari瀏覽網頁，一切都很好，CSS的正確顯示（如預期）。當我在IE 9中查看這個頁面時，這些鏈接是正常的「HyperLink」藍色（就像它只是忽略了兩個color指令）。如果我從我的CSS中刪除「rgba」行，則鏈接將顯示在#cccccc中。如果我用color: #000000替換「rgba」行，鏈接消失（如預期，因爲身體也是#000000）。

根據作者寫的內容，我認爲將第二行放在支持「rgba」標準的瀏覽器中將會起作用，而那些不支持「rgba」標準的瀏覽器將會忽略它。

我錯過了什麼嗎？

來源

2012-09-02 mbm29414

我已經就此問題與IE <9，但只有老版本，因爲IE9不支持'RGBA（）'。您的網頁是否缺少文檔類型？ – BoltClock

那麼我明白你發佈的代碼，但你可以創建一個jsFiddle？也許你錯過了DOCTYPE之類的東西 –

發佈的代碼似乎導致描述的現象，但只在怪癖模式。如果頁面需要以怪癖模式工作，那麼恐怕您需要考慮笨拙的解決方法，比如使用「條件IE註釋」和備用代碼的副本，在基本樣式表之後提供，以便覆蓋相關設置（IE少於9）。例;

<style> 
/* the basic style sheet here */ 
</style> 
<!--[if IE lt 9]> 
ul#nav li a { 
    color: #cccccc; 
} 
<![endif]-->

編輯：看來，在Quirks模式，IE通常表現讓無法識別值的聲明導致即使事先設定的值被丟棄。例如。 h1 { color: red; color: nonsense }將h1設爲其默認顏色，而不是紅色。但是這隻適用於CSS規則。如果您將聲明放在單獨的規則中，問題就會消失。

所以在這裏，例如，你可以只劃分爲ul#nav li a規則分爲兩個部分：

ul#nav li a { 
    font-weight: bold; 
    padding: 5px 15px; 
    text-decoration: none; 
    color: #cccccc; 
} 
ul#nav li a { 
    color: rgba(255, 255, 255, 0.7); 
}

來源

2012-09-03 05:31:53

CSS3在IE9上的優雅降級

回答

相關問題