使用CSS的IE7中的背景渐变

我正在使用以下CSS创建线性背景渐变。它似乎在IE8/9，FF，Safari和Chrome中工作得很好，但在IE7中却不行。 IE7显示一个坚实的（绿色）背景。这里是我的代码使用CSS的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; 
}

来源

2011-08-31 Kiwi1

在IE < = 7中，除非元素具有layout，否则过滤器将不起作用。

zoom: 1;

要知道，它可以破坏其它的东西，所以老好background-image可能是安全和可靠的解决方案。

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

来源

2011-08-31 13:09:33 duri

谢谢你的工作出色！（虽然因为我是一个新成员，所以不能给一个投票，编辑：对于Webkit的更新语法，我可以使用-webkit-linear-gradient（）正确吗？ – Kiwi1

@Schimmel正确;语法与Firefox和IE10相同，除了不同的供应商前缀。顺便说一句，您应该能够通过点击左侧的复选框来接受我的答案。 – duri

@duri - IE10？这是新的东西吗？ :) – Dementic

我不能确定这个参数变换是大小写敏感的 - 但看到其他大多数CSS的是，你可以尝试：

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

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

来源

2011-08-31 12:58:30

我试过你的解决方案，但不幸的是它没有工作。也试图给所有的实例低壳，但也似乎没有成功。 – Kiwi1

尝试使用'progid：DXImageTransform.Microsoft.gradient'，注意小写'渐变'。 –

再次感谢您的快速解答，但不幸的是，这也没有奏效。我非常困惑，因为根据以下文档，此转换应该适用于Internet Explorer 5.5或更高版本。请参阅：http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx – Kiwi1

正确的语法是：

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

这是通过IE4支持>

请参阅MSDN源here。

来源

2011-08-31 13:15:13 Kyle

使用CSS的IE7中的背景渐变

回答

相关问题