在使用CSS时，如何在IE7中实现背景渐变？

Question

我正在使用下面这段CSS代码创建线性背景渐变。在IE8/9、FF、Safari和Chrome中似乎都可以正常工作，但在IE7中无法正常显示，会显示为纯色（绿色）背景。以下是我的代码：

.menu_body a {
  display:block;
  color:#006699;
  background: #008800;
  /* Mozilla: */
  background: -moz-linear-gradient(top, #0b71a4, #025f8e);
  /* Chrome, Safari:*/
  background: -webkit-gradient(linear,
            left top, left bottom, from(#0b71a4), to(#025f8e));
  /* MSIE */
  filter: progid:DXImageTransform.Microsoft.Gradient(
            StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
  padding: 1px 18px;
}   

- FungyBytes

Answer 1

在IE<=7中，除非元素具有布局，否则滤镜将不起作用。

zoom: 1;

请注意，它可能会破坏其他内容，所以旧的可靠的background-image可能是一个安全和可靠的解决方案。

另请注意，您的CSS缺少用于Opera、IE10和Webkit更新语法的渐变属性。

- duri

---

谢谢，这个很好用！（因为我是新成员，所以无法点赞，对此很抱歉）编辑：对于Webkit的更新语法，我可以使用-webkit-linear-gradient()，对吗？ - FungyBytes

@Schimmel 正确；该语法与 Firefox 和 IE10 相同，除了不同的供应商前缀。顺便说一下，您可以点击左侧的复选框来接受我的答案。 - duri

@duri - IE10？那是新出的东西吗？ :) - Rafael Herscovici

@Dementic，IE10已经发布了5个开发版本。我有点惊讶你没有听说过。 - duri

“zoom: 1”是解决99%IE7问题的方法。 - Phil

Answer 2

正确的语法是：

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)

这是IE4及以上版本支持的。

在此处查看MSDN源代码。

- Kyle

Answer 3

我不确定这个转换的参数是否区分大小写 - 但是考虑到大多数其他CSS都是这样的，你可以尝试：

startColorstr='#0b71a4', endColorstr='#025f8e'

请注意小写的起始字符和小写的“str”后缀。

- Grant Thomas

---

我尝试了你的解决方案，但不幸的是它没有起作用。我还尝试了将所有实例都转换为小写字母，但似乎也行不通。 - FungyBytes

也可以尝试使用 progid:DXImageTransform.Microsoft.gradient，请注意小写的 gradient。 - Grant Thomas

谢谢您再次的快速回复，但不幸的是这个方法还是不起作用。我真的很困惑，因为根据下面的文档，这个转换应该适用于Internet Explorer 5.5 或更高版本。请参考：http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx - FungyBytes

抱歉我无法提供帮助，但你可以查看此链接(http://www.colorzilla.com/gradient-editor/)，这是一个CSS渐变生成器，它可能会让你更轻松地在不同浏览器中测试案例。 - Grant Thomas

这确实是一个非常方便的工具！我之前不知道它的存在。谢谢你分享这个链接！ - FungyBytes