0

我想出了以下 css，它创建了一个 100% x 1 高线 - 基本上是一个带有样式的复制 hr。末端逐渐变为中心的灰色。在最新的 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;
}
4

3 回答 3

0

background: rgb(222,222,222);在 IE7-8 中无效。使用十六进制等效项#DEDEDE。

于 2013-03-31T21:40:44.300 回答
0

我已经研究了很多方法并得出了这个结论……对于 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，但这将照顾所有浏览器并且看起来和现在一样。

于 2013-03-31T23:49:38.953 回答
0

ie7 不支持数据uri。ie8 有一些区别，最大的是它们不能> 32kb。此处的文档：http: //msdn.microsoft.com/en-us/library/cc848897 (VS.85).aspx您必须实现 mhtml 才能让数据 uri 在 ie7 中工作。您可以在此处阅读有关它的更多信息并查看演示：http: //jonraasch.com/blog/css-data-uris-in-all-browsers
但临时，实现此目标的一种超级简单的方法是提供服务ie8 及以下版本的 png 或 gif。您已经在提供 < IE8 样式，如果您将其更改为小于或等于，您可以简单地替换该类的背景样式，如下所示： 

.ie8andbelow .g-line{background:url("image-for-ie8-and-below.png")}
于 2013-04-01T00:00:46.350 回答