在Chrome/FF中工作的CSS樣式但不適用於IE8

我繼承了一個我正在完成的網站，並且這種樣式適用於我的頁腳中的標籤（如果我沒有給出足夠的信息，請原諒我讓我知道，我會把它）。風格把一個微妙的背景顏色周圍的標題文本和使棱角變圓了一下：在Chrome/FF中工作的CSS樣式但不適用於IE8

h4 { 
    background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3); 
    border-radius: 8px 8px 8px 8px; 
    color: #5CB414; 
    font-size: 26px; 
    font-weight: bold; 
    margin-bottom: 20px; 
    padding: 12px 0 8px 10px; 
    position: relative; 
    }

這個工程在Chrome和FF很大，但在IE8這是行不通的。而在IE8中，它不會浮動彼此相鄰的列。 Here is the site.向下滾動到底部看問題（應該是3列，但在IE中它只有2並且沒有適用於H4的背景樣式）

我知道IE很挑剔，但我不知道是什麼怎麼辦呢。任何幫助，將不勝感激。謝謝！

來源

2011-04-14 drpcken

版本使用jQuery，而不是CSS3做它不支持RGBA或邊界半徑，所以這些都是簡單地被忽略。您可以嘗試跨瀏覽器語法http://css3please.com，但這不會讓您在9之前的IE版本中找到圓角。

您的列浮動問題源於在第1454行的第n個子選擇器的使用你的style.css：

.col：nth-child（3）{margin-right：0; }

再次，IE8和更低版本不支持這個，所以你必須找到解決辦法。您可以在第三列添加一類「last」，並將其放置在樣式表中：

col.last {margin-right：0！important; }

來源

2011-04-14 15:27:27 amustill

我相信它在IE8中實際上並不支持。 – DHuntrods 2011-04-14 15:31:56

你是對的，不是。我總是感到困惑，因爲我大部分時間都是使用「第一個孩子」，因爲這個原因，因爲它在IE7 +中得到了支持，並且只需要在IE6中簡單地修復它。用防彈修補編輯的答案。 – amustill 2011-04-14 15:36:49

這是否應該是'.col.last'？我知道你可以添加多個類到一個元素，但這讓我有點困惑。謝謝。 – drpcken 2011-04-14 16:30:10

只要在底部簡單更換「.COL」 width:300px到width:292px;這只是勉強過大失去了3列。

還與圓角與交叉瀏覽器兼容我喜歡從這裏得到我的風格：http://css3please.com/

我不知道，圓角將在IE8中工作或更低，所以你可以嘗試之前，IE 9的 http://jquery.malsup.com/corner/

來源

2011-04-14 15:23:13

謝謝，這很有幫助，但我不想改變我的列的寬度，所以我使用amustill的建議，在列中添加一個.last類。我希望我能給你兩個答案檢查！謝謝！ – drpcken 2011-04-14 16:33:12

不客氣。至少你有它的工作。 – 2011-04-14 16:59:31

在Chrome/FF中工作的CSS樣式但不適用於IE8

回答

相關問題