使用背景大小的水平渐变条纹在 IE9 中不起作用答案

【问题标题】：Horizontal gradient stripe using background-size not working in IE9使用背景大小的水平渐变条纹在 IE9 中不起作用
【发布时间】：2012-10-09 10:30:43
【问题描述】：

我正在生成一个水平渐变条作为我网站的背景，它在除...IE9 之外的所有浏览器中都能完美运行。

渐变本身是有效的，只是我想限制蓝条的高度。在 Safari/Firefox/Chrome 中查看，然后在 IE9 中查看，您可以看到蓝色渐变填充了整个元素。

Horizontal gradient bar using CSS

这是我的 CSS：

#inner {
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 35%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(35%,#0057be));
background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -o-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 35%);
background: linear-gradient(to bottom,  #1e5799 0%,#0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;

}

【问题讨论】：

我猜这是因为您的渐变是 css 制作的，因此要在 IE9 中使用 background-size 属性，您必须具有图像背景/彩色背景。所以filter 与 IE 中的background 不同

标签： css background filter internet-explorer-9 gradient

【解决方案1】：

这段代码应该可以在 IE9 上运行：

background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);

我用Visual CSS Gradient Generator做到了

更新的 CSS：

#inner {
background: #1e5799;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWU1Nzk5Ii8+PHN0b3Agb2Zmc2V0PSIwLjM1IiBzdG9wLWNvbG9yPSIjMDA1N2JlIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #1e5799), color-stop(35%, #0057be));
background: -webkit-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -moz-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -ms-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: -o-linear-gradient(top, #1e5799 0%, #0057be 35%);
background: linear-gradient(to bottom, #1e5799 0%, #0057be 35%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
background-size: 1px 10%;
background-repeat: repeat-x;
margin: 0 auto;
padding: 1em 0;
}

IE9 不支持 CSS3 渐变，但它支持内联 SVG。我不建议在 IE9 上混合使用 filter 和 SVG 背景，我认为最好的方法是使用 this article by Paul Irish 中解释的条件 cmets。

【讨论】：

是的，您看不到 background-size 属性的任何效果，因为您没有在 MS IE 中指定背景。 MS 过滤器不是背景……
99% 的 Giona，我只需要对您的代码进行一些修改，完全删除过滤器并添加边框：0。