CSS圓角和陰影在IE或Chrome中不起作用

我正在使用CSS圓角和陰影，當我通過在Visual Studio中通過Chrome調試運行它時，它工作得很好，但是當我將它放到服務器上並嘗試通過Chrome或IE通過服務器訪問它不顯示陰影和圓角。由Visual Studio提供的服務器端和虛擬服務器有什麼不同？感謝您的幫助提前。CSS圓角和陰影在IE或Chrome中不起作用

.greenborder 
{ 
border-radius: 15px 15px 15px 15px;padding: 8px; border: 2px solid #7F9F1A; 
behavior: url(ie-css3.htc); 
background-color :White ; 
box-shadow: 10px 10px 5px #888; 
}

修訂

-moz-border-radius: 15px; /* Firefox */ 
-webkit-border-radius: 15px; /* Safari, Chrome */ 
border-radius: 15px 15px 15px 15px; /* CSS3 */ 

padding: 8px; 
border: 2px solid #7F9F1A; 
behavior: url(ie-css3.htc); 
background-color: White; 

-webkit-box-shadow: 10px 10px 5px #888; 
-moz-box-shadow: 10px 10px 5px #888; 
box-shadow: 10px 10px 5px #888;

來源

2012-04-11 Nick Manojlovic

對於IE，請確保您有<！DOCTYPE HTML> – 2012-04-11 20:11:51

我已經放置<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd「>進入我的母版頁。 – 2012-04-12 14:25:46

使用<！DOCTYPE HTML>。這是HTML5標記。 – 2012-04-12 14:58:46

您必須使用這種造型，使其跨瀏覽器兼容：

.rounded-corners { 
    -moz-border-radius: 10px; /* Firefox */ 
    -webkit-border-radius: 10px; /* Safari, Chrome */ 
    border-radius: 10px; /* CSS3 */ 
}

來源

2012-04-11 20:17:19

嘿感謝您的回覆。我試過上面的代碼，它適用於Firefox和Chrome，但不與IE瀏覽器嗯，我可能做錯了什麼？ – 2012-04-12 13:50:01

它只能在IE9中運行，不是以前的版本，因爲它們不支持邊界半徑。對於IE9，您必須明確設置全部4個角落。 'border-radius：10px 10px 10px 10px;' – 2012-04-12 13:51:43

檢查上面的更新代碼，它仍然不起作用？ – 2012-04-12 14:12:55

您可以使用名爲Prefixer一個偉大的小工具，使你的CSS跨瀏覽器。非常容易使用，爲我節省了很多時間。

來源

2012-04-11 23:03:33

非常感謝這個鏈接的真棒。Bu我得到它適用於除IE7-8-9以外的所有瀏覽器。 – 2012-04-12 14:18:13

它**應**在IE中工作。我使用了一個類似的代碼，並得到了正確的結果。正如我提到的那樣，請在[jsfiddle.net]（http://jsfiddle.net）（http://jsfiddle.net） – 2012-04-12 17:53:15

中發佈你的代碼，如果我通過Visual Studio在通過Internet Explorer進行調試時運行它，它可以工作......但是如果我將它放到服務器上然後嘗試訪問網站我什麼也得不到。它可能是服務器端的東西嗎？ – 2012-04-12 18:08:40

CSS圓角和陰影在IE或Chrome中不起作用

回答

相關問題