Question

我已经提出了以下css，它创建了一个100％x 1高的线 - 基本上是带有样式的复制品。两端渐渐变成中心的灰色。在最新的chrome，ff，opera，ie10和ie9上完美运行。对于ie7和ie8，它什么都没有显示。我到底做错了什么？

<!DOCTYPE html>
<!--[if lte IE 8 ]> <html class="ie8" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-US"> <!--<![endif]-->

并只使用“”来显示该行。

.g-line{
height:1px;
width:100%;
display:block;
background: rgb(222,222,222); /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE1JSIgc3RvcC1jb2xvcj0iI2RlZGVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iI2RlZGVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(222,222,222,1) 15%, rgba(222,222,222,1) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(15%,rgba(222,222,222,1)), color-stop(85%,rgba(222,222,222,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(222,222,222,1) 15%,rgba(222,222,222,1) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(222,222,222,1) 15%,rgba(222,222,222,1) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(222,222,222,1) 15%,rgba(222,222,222,1) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(222,222,222,1) 15%,rgba(222,222,222,1) 85%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}

.ie9 .g-line{
filter:none;
}

Answer 1

background: rgb(222,222,222);在IE7-8中无效。使用等效的HEX #DEDEDE。

Answer 2

我已经看了很多这样的方法并得出了这个结论......对于ie7和ie8，我将使用：

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr='#00dedede',
  endColorstr='#dedede',
  GradientType=1
);

和

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr='#dedede',
  endColorstr='#00dedede',
  GradientType=1
);

00表示0 opacity级别。当然，使用这种方法，我将必须制作左右线并将它们组合起来，因此当前还有一个额外的div和另外一个额外的css，但是这将照顾所有浏览器并且看起来相同就像现在一样。

Answer 3

ie7不支持数据uris。 ie8确实有一些区别，最大的是他们不能＆gt; 32KB。这里的文档：http://msdn.microsoft.com/en-us/library/cc848897(VS.85).aspx你必须实现mhtml才能获得在ie7中工作的数据uris。你可以在这里阅读更多相关信息并观看演示：http://jonraasch.com/blog/css-data-uris-in-all-browsers
但另外，一个超级简单的方法就是为ie8及以下提供png或gif。你已经提供了＆lt; IE8样式，如果你将其改为小于或等于，你可以简单地替换该类的背景样式，如下所示：

.ie8andbelow .g-line{background:url("image-for-ie8-and-below.png")}

使用css背景的渐变线 - 不在ie 7和8中工作

3 个答案: