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渐变处理

回答

相关问题