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
设置display:inline-block在IE 6,7和8中为我修改了渐变。
http://jsfiddle.net/wSuJj/3/
我不知道为什么，这可能与hasLayout有关，希望有人可以前来解释。
IE6和7中的边界仍然存在一些不一致的地方，似乎并不相关。
要将滤镜应用于元素，它必须hasLayout 。 我个人使用zoom:1 。
上一篇: Internet Explorer CSS gradient handling
下一篇: Core Graphics: Drawing along a path with a normal gradient