IE7 中的背景渐变与 CSS
我正在使用以下 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;
}
I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (green) background. Here is my code
.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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在 IE<=7 中,过滤器将不起作用,除非元素具有 布局。
请注意,它可能会破坏其他东西,因此旧的好的
background-image
可能是安全可靠的解决方案。另请注意,您的 CSS 缺少 Opera、IE10 的渐变属性和 Webkit 的更新语法。
In IE<=7, filters won't work unless element has layout.
Be aware that it can break other things, so old good
background-image
might be safe and reliable solution.Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.
正确的语法是:
This issupported by IE4>
请参阅此处的 MSDN 源代码。
The correct syntax is:
This is supported by IE4>
See the MSDN source here.
我不确定此转换的参数是否区分大小写 - 但与大多数其他 CSS 一样,您可以尝试:
注意小写起始字符和小写
str
后缀。I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:
Notice the lower-case starting character, and lower-case
str
suffix.