Internet Explorer CSS渐变处理

Question

我已经创建了一个样式，它将为所有“按钮”提供渐变背景。问题是，并非所有的按钮实际上都是按钮，有些链接被样式化成看起来像按钮。

<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会将渐变应用于元素，但不会应用于元素。其他浏览器都可以正常工作。有没有办法解决让IE也给标签应用渐变的问题？

您可以在此处进行测试并查看结果，只有IE会导致最后一个没有渐变。 jsfiddle.net

- Jeremy B.

Answer 1

在IE 6、7和8中，设置display:inline-block可以解决我的渐变问题。

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

我不确定原因是什么，可能与hasLayout有关，希望有人能来解释一下。

在IE6和7中，边框仍然存在一些不一致的问题，但似乎与此无关。

- Wesley Murch

---

@JeremyB.：与直接相关的不是很相干：请注意一下IE6和IE7中的边框行为，目前有些问题，我暂时还弄不清楚原因。 - Wesley Murch

IE 6和7不支持圆角，但我们在“渐进增强”下已经解决了这个问题。然而，某些按钮变成白色是一个问题。 - Jeremy B.

我的意思是按钮看起来不像链接。 - Wesley Murch

IE浏览器中的按钮很难进行良好的样式设计。 - atlavis

Answer 2

要对元素应用过滤器，它必须具有hasLayout。个人建议使用zoom:1。

- atlavis

---

我也更喜欢使用 zoom:1，但不知何故在这个 fiddle 中无法正常工作？ - Wesley Murch

我不知道为什么它没起作用。你尝试过哪个IE版本？IE 8+需要-ms-filter:。 - atlavis

@atlavis：你说得对 - 6和7确实显示了梯度，但由于某种原因，8没有显示。 - Wesley Murch

我认为IE 8需要-ms-filter:加上撇号，例如-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorStr="#20799d", EndColorStr="#5cb9df")';。我现在无法检查它，但我希望它能够正常工作。http://jsfiddle.net/wSuJj/6/ - atlavis

@atlavis：在真正的IE8 Win 7安装中，对我来说无法工作，至少在我的电脑上是这样。 - Wesley Murch