Internet Explorer CSS 渐变处理答案

【问题标题】：Internet Explorer CSS gradient handlingInternet Explorer CSS 渐变处理
【发布时间】：2011-06-07 19:07:01
【问题描述】：

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

<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

【问题讨论】：

标签： html css internet-explorer gradient

【解决方案1】：

设置 display:inline-block 为我在 IE 6、7 和 8 中修复了渐变。

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

我不知道为什么，可能与hasLayout有关，希望有人能过来解释一下。

IE6 和 7 中的边框仍然存在一些不一致，这似乎并不相关。

【讨论】：

@JeremyB.：不直接相关：查看 IE6 和 IE7 中的边框行为，它有点不对劲，我现在不知道为什么。
IE 6 和 7 不支持圆角，但我们在“渐进式增强”中进行了介绍。不过，让某些按钮变白是个问题。
我的意思是按钮看起来不像链接。
IE 中的按钮很难设置好样式。

【解决方案2】：

要将过滤器应用于元素，它必须hasLayout。就个人而言，我使用zoom:1。

【讨论】：

我也更喜欢zoom:1，但由于某种原因，它在小提琴中不起作用？
我不知道为什么它不起作用。你试过哪个IE版本？ IE 8+ 需要-ms-filter:.
我尝试了 6-8，只是尝试使用 -ms-filter 而不是 filter，它似乎使情况变得更糟。你能用zoom:1演示一个工作版本吗？
@atlavis：你是对的 - 6 和 7 确实显示了渐变，但由于某种原因不是 8。
我认为 IE 8 需要 -ms-filter: + 撇号，例如 -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorStr="#20799d", EndColorStr="#5cb9df")'; 我现在无法检查，但我希望它可以工作 jsfiddle.net/wSuJj/6