Internet Explorer CSS漸變處理

我已經創建了一個可以給所有「按鈕」漸變背景的樣式。這個問題並不是所有的按鈕都是按鈕，有些是鏈接，它們看起來像一個按鈕。Internet Explorer CSS漸變處理

<input type="submit" value="submit" class="gradient" /><br /> 
<input type="button" value="button" class="gradient" /><br /> 
<a href="" class="gradient">Link</a>

對於這些我已經應用了以下樣式：

background-image: -moz-linear-gradient(top, #20799d, #5cb9df); /* FF3.6 */ 
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #20799d),color-stop(1, #5cb9df)); /* Saf4+, Chrome */ 
background-image: -webkit-linear-gradient(#20799d, #5cb9df); /* Chrome 10+, Saf6 */ 
background-image: linear-gradient(top, #20799d, #5cb9df); 
font-family: Arial, Helvetica, sans-serif; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df'); /* IE6–IE9 */

的問題是在這裏找到。 IE 7-9會將漸變應用於元素<input>而不是元素<a>。所有其他瀏覽器均可使用。是否有修復讓IE瀏覽器給<a>標籤漸變？

您可以在這裏測試並查看結果，只有IE導致最後一個沒有漸變。 jsfiddle.net

來源

2011-06-07 Jeremy B.

設置display:inline-block固定梯度爲我在IE 6,7和8

http://jsfiddle.net/wSuJj/3/

我不知道爲什麼，這可能與hasLayout的做，希望有人能一起去並解釋。

IE6和7中的邊界仍然存在一些不一致的情況，但似乎並不相關。

來源

2011-06-07 19:16:41

這對我很有用。謝謝！ – 2011-06-07 19:20:33

@JeremyB .:沒有直接關係：查看IE6和IE7中的邊界行爲，這有點關閉，我現在還搞不清楚爲什麼。 – 2011-06-07 19:22:49

IE 6和7不支持圓角，但是我們已經在「漸進式增強」中介紹了它。雖然有一些按鈕出現白色是一個問題。 – 2011-06-07 19:23:14

要將濾鏡應用於元素，必須使用hasLayout。我個人使用zoom:1。

來源

2011-06-07 19:24:49 atlavis

我寧願'zoom：1'，但由於某種原因，它不能在小提琴中工作？ – 2011-06-07 19:28:08

我不知道爲什麼它不起作用。你試過了哪個IE版本？ IE 8+需要'-ms-filter：'。 – atlavis 2011-06-07 19:51:12

我嘗試過6-8，只用'-ms-filter'而不是'filter'試過，它似乎讓它變得更糟。你可以用'zoom：1'演示一個工作版本嗎？ – 2011-06-07 19:55:26

Internet Explorer CSS漸變處理

回答

相關問題