是否有任何解決方案可以在Firefox 3.5及更低版本中獲得對CSS Gradient的支持？

Question

是否有任何解決方案可以在Firefox 3.5及更低版本中獲得對CSS Gradient的支持？

http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/

Answer 1

我會強烈建議你只使用一個背景圖片。我知道每個人都迫不及待地想要開始使用所有最新的CSS3特性，但是我們必須等待CSS3的這些部分被主流瀏覽器採用（這將在CSS3到達W3C之前發生）建議）。

使用特定於供應商的擴展是IMO的一個不好的做法，似乎是對沒有人關心Web標準的時代的迴應，以及Web開發人員，只是針對單個瀏覽器進行編碼（還有俗氣的專爲IE按鈕），或者必須以多種方式編寫相同的代碼才能支持不同的瀏覽器。所有主流瀏覽器現在都支持PNG alpha層透明度。所以強制使用CSS來生成漸變幾乎沒有什麼優勢。它只引入不必要的代碼冗餘。

如果你仍然沒有使用BG圖像，那麼唯一的選擇就是使用JavaScript。這裏有一個腳本，應該工作在Firefox 3以上，甚至可能是Firefox 2：JavaScript Gradient Roundrects。

的代碼看起來是這樣的：

var style = { 
    'gradient-start-color': 0x99ddff, 
    'gradient-end-color': 0xffffff, 
    'border-radius': 1 
}; 
OSGradient.applyGradient(style, $('#Disp')[0]); 

但這仍然實現，可以用一個簡單的1x50px PNG圖像獲得結果的迂迴的方式。

Answer 2

雖然這篇文章「Cross-Browser CSS Gradient」解釋如何使用在所有的瀏覽器CSS3漸變功能，它仍僅限於火狐3.6或更高版本。

所以從2006年名單這個老文章除了「Super-Easy Blendy Backgrounds」可能

CSS3即將實施的背景大小屬性可供選擇（但不是所有的使用情況，你可能需要），但由於CSS3有一個從來沒有ETA，現在沒有幫助。那麼我們該怎麼辦？
那麼，我們使用的東西會縮放，就像img元素一樣。我們可以使用img元素，並將寬度和高度設置爲100％，而不是使用背景來顯示PNG混合。

，與像CSS：

<style type="text/css">.grad img { 
    height: 100%; 
    left: 0px; 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    z-index: 0; 
} 
.box { 
    border: solid orange 2px; 
    float: left; 
    margin: 1px; 
    position: relative; 
    width: 165px; 
    padding: 5px; 
} 
.box * { 
    margin: 0px; 
    position: relative; 
    z-index: 1; 
} 
* html .grad { 
    filter: progid:DXImageTransform.Microsoft.AlphaImage » 
Loader (src='grad_white.png', sizingMethod='scale'); 
} 
* html .grad img { 
    display: none; 
} 
* html .box { 
    position:static; 
} 
.blue { 
    background-color: #2382a1; 
} 
.green { 
    background-color: #4be22d; 
} 
.pink { 
    background-color: #ff009d; 
} 
</style> 

<!--[if IE 7]> 
<style type="text/css"> 
.box { 
    border: solid red 2px; 
    height:2.5em; 
} 
</style> 
<![endif]--> 

和標記：

<div class="box grad blue"> 
    <img src="grad_white.png" alt="blur gradient box" /> 
    <p><a href="#">Ooo, linked text</a>!</p> 

</div> 
<div class="box grad pink"> 
    <img src="grad_white.png" alt="pink gradient box" /> 
    <p><a href="#">Ooo, linked text</a>!</p> 
</div> 

<div class="box grad green"> 
    <img src="grad_white.png" alt="green gradient box" /> 
    <p><a href="#">Ooo, linked text</a>!</p> 
</div>