舊版瀏覽器的CSS3回退

我已經用CSS3創建了一個圓圈，問題在於舊版本的瀏覽器（ie7等），圓圈顯示爲正方形。舊版瀏覽器的CSS3回退

我知道我可以使用背景圖片作爲備份，但是這不利於使用代碼？

如果我把背景圖像放在CSS中，它會放在哪裏？

.ButtonB:hover, .ButtonB.hover { 
    background: -moz-linear-gradient(
     center top, 
     rgba(255, 255, 255, .2) 0%, 
     rgba(255, 255, 255, .1) 100% 
    );/* FF3.6 */ 
    background: -webkit-gradient(
     linear, 
     center bottom, 
     center top, 
     from(rgba(255, 255, 255, .1)), 
     to(rgba(255, 255, 255, .2)) 
    );/* Saf4+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */ 
}

來源

2013-06-03 scott

所有代碼爲一個小圓圈...爲什麼不只是使用圖像的所有瀏覽器？由於您使用的是瀏覽器特定的標籤，所有代碼可能在將來需要更改。但是'.ButtonB：hover，ButtonB.hover {background：url（'yourpathtoimage'）;完成所有瀏覽器的工作。 – Adrian

使用以下內容將爲各種瀏覽器提供更好的支持，並且在不支持漸變時將回退爲純色，您可以用圖像替換此純色。

background: #0A284B; /* for images use #0A284B url(image.jpg)*/ 
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); 
background: -webkit-linear-gradient(#0A284B, #135887); 
background: -moz-linear-gradient(top, #0A284B, #135887); 
background: -ms-linear-gradient(#0A284B, #135887); 
background: -o-linear-gradient(#0A284B, #135887); 
background: linear-gradient(#0A284B, #135887); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); 
zoom: 1;

您需要指定一個height或zoom: 1申請hasLayout的元素爲這個在IE工作。

來源

2013-06-03 09:48:43 Blowsie

感謝您的這種吹噓，我會使用此代碼。因爲廣場看起來不太好，所以我想去看背景圖片。 – scott

謝謝。對我來說，訣竅就是先把單色背景放在其他人面前。 –

.ButtonB:hover, .ButtonB.hover { 
    background: url('yourpathtoimage'); /* for old browsers */ 
    background: -moz-linear-gradient(
     center top, 
     rgba(255, 255, 255, .2) 0%, 
     rgba(255, 255, 255, .1) 100% 
    );/* FF3.6 */ 
    ... 
}

在這種情況下，如果瀏覽器支持linear-gradient它會覆蓋第一行。

來源

2013-06-03 09:42:51 Morpheus

您正在使用舊功能瀏覽器不支持的CSS功能的全部負載 - 漸變，Alpha通道透明度，也可能會出現邊框半徑。

簡短的回答是，通常最好的答案是簡單地離開它，讓舊的瀏覽器以不同的方式展示它;它看起來可能不像你想的那麼漂亮，但是如果它在IE7中可用，那麼你已經做得足夠了。

如果您確實需要在IE7和其他舊版瀏覽器中支持這些功能，那麼您可能需要查看CSS3Pie，它在IE中提供了一個基於JavaScript的後備解決方案，可以在此處看到您使用的所有功能。下載腳本並按照網站上的說明進行設置。

希望有所幫助。

來源

2013-06-03 09:51:15 Spudley

只是一個指針，CSS3派可以使一個網頁非常緩慢。特別是有大量DOM – Blowsie

感謝spudley的網頁，我會看看css3pie – scott

@Blowsie：你的意思是它會讓網頁在非常慢的舊版IE瀏覽器上播放，還是會影響新的IE版本/其他瀏覽器？ –

舊版瀏覽器的CSS3回退

回答

相關問題