在IE7中背景的梯度利用CSS [英] background gradients in IE7 with CSS

问题描述

我使用CSS的以下位来创建一个线性渐变背景。这似乎在IE8 / 9，FF，Safari和Chrome，但不是在IE7的工作就好了。 IE7显示了固体（绿色）的背景。这里是我的code

  .menu_body一个{
  显示：块;
  颜色：＃006699;
  背景：＃008800;
  / * Mozilla的：* /
  背景：-moz线性梯度（顶，＃0b71a4，＃025f8e）;
  / *浏览器，Safari浏览器：* /
  背景：-webkit-梯度（线性，
            左上，左下，从（＃0b71a4），到（＃025f8e））;
  / * * MSIE /
  过滤：进程id：DXImageTransform.Microsoft.Gradient（
            StartColorStr ='＃0b71a4'，EndColorStr ='＃025f8e'，GradientType = 0）;
  填充：1px的18像素;
}
 

解决方案

在IE＆LT; = 7，过滤器不会工作，除非元素的布局。

 变焦：1;
 

请注意，它可以打破其他的事情，所以老好背景图片可能是安全可靠的解决方案。

同时请注意，你的CSS缺乏对歌剧，IE10梯度属性和Webkit的更新过的语法。

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;
}   

解决方案

In IE<=7, filters won't work unless element has layout.

zoom: 1;

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.

这篇关于在IE7中背景的梯度利用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！