带有 CSS 的 IE7 中的背景渐变答案

【问题标题】：background gradients in IE7 with CSS带有 CSS 的 IE7 中的背景渐变
【发布时间】：2011-08-31 12:54:23
【问题描述】：

我正在使用下面的 CSS 来创建线性背景渐变。它似乎在 IE8/9、FF、Safari 和 chrome 中工作得很好，但在 IE7 中却不行。 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;
}

【问题讨论】：

标签： css background internet-explorer-7 gradient

【解决方案1】：

在 IElayout，否则过滤器将不起作用。

zoom: 1;

请注意，它可能会破坏其他东西，所以旧好的 background-image 可能是安全可靠的解决方案。

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

【讨论】：

谢谢，效果很好！（虽然我是新成员，但无法投票，对此感到抱歉）编辑：对于 Webkit 的更新语法，我可以使用 -webkit-linear-gradient() 对吗？
@Schimmel 正确；语法与 Firefox 和 IE10 相同，只是供应商前缀不同。顺便说一句，您应该可以通过单击左侧的复选框来接受我的回答。
@duri - IE10 ？那是新事物吗？ :)
@Dementic IE10 已经发布了 5 个开发版本。我有点惊讶你没有听说。
zoom: 1，解决99%的IE7问题

【解决方案2】：

正确的语法是：

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

IE4支持这个>

请参阅 MSDN 源代码here。

【讨论】：

【解决方案3】：

我不确定此转换的参数是否区分大小写 - 但与大多数其他 CSS 一样，您可以尝试：

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

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

【讨论】：

我尝试了您的解决方案，但不幸的是它不起作用。还尝试将所有实例都小写，但这似乎也没有成功。
也可以试试progid:DXImageTransform.Microsoft.gradient - 注意小写的gradient。
再次感谢您的快速回答，但不幸的是这也不起作用。我真的很困惑，因为根据以下文档，此转换应该适用于 Internet Explorer 5.5 或更高版本。见：msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
抱歉，我帮不上忙，但请查看 this link，它是一个 CSS 渐变生成器，可以帮助您更轻松地在浏览器之间测试用例。
这确实是一个非常方便的工具！不知道它的存在。感谢您分享此链接！