0

我正在创建网站，我遇到了 Internet Explorer（在版本 8 上测试）的问题，它不显示背景图像

这是我的代码：

    body {
      background: rgb(255,255,255); /* Old browsers */
      background-image: url(../images/bg.png);
      background-image: url(../images/bg.png), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(105,205,249,1) 100%); /* FF3.6+ */
      background-image: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(105,205,249,1))); /* Chrome,Safari4+ */
      background-image: url(../images/bg.png), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background-image: url(../images/bg.png), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Opera 11.10+ */
      background-image: url(../images/bg.png), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* IE10+ */
      background-image: url(../images/bg.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* W3C */
      background-repeat: no-repeat;
      background-position: 0 0;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 15px;
}

知道如何解决这个问题吗？

4

2 回答 2

1

看看这个小提琴的例子。我不知道你是否想要这样。但它也适用于 IE。核实。例子

 body {
      background: rgb(255,255,255); /* Old browsers */
      background-image: url(../images/bg.png);
      background-image: url(../images/bg.png), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(105,205,249,1) 100%); /* FF3.6+ */
      background-image: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(105,205,249,1))); /* Chrome,Safari4+ */
      background-image: url(../images/bg.png), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background-image: url(../images/bg.png), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Opera 11.10+ */
      background-image: url(../images/bg.png), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* IE10+ */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#6BCEF9')"; /* IE8 */
      background-image: url(../images/bg.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* W3C */
      background-repeat: no-repeat;
      background-position: 0 0;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 15px;
}

在这里，我添加了以下行。

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#6BCEF9')"; /* IE8 */

检查并告诉我。谢谢

于 2012-11-09T16:35:18.267 回答
0

我发现这个 http://social.msdn.microsoft.com/Forums/en-ZA/iewebdevelopment/thread/4771f218-42fc-43b0-b0fd-bda98eef12ad

它讨论了 IE8 中与 JS 声明冲突的背景图像。不确定这是否是这里的问题。我知道你不应该在这里遇到 hasLayout 问题，但你可能想尝试放置一个 display:block; 在身体上。您还应该确保正文的大小适合其中的内容（即确保清除浮动等 - 尽管这很可能是罪魁祸首，只有当您的 bgs 在大多数客户端中失败时）。

我喜欢放一个边框：1px纯红色；围绕我试图定位或调试的东西。希望对一些人有所帮助，对不起，答案并不完整。

此外，另一种测试方法是在包含 css 之后添加 IE 条件语句，然后从那里开始播放。

于 2012-11-09T16:40:18.380 回答