Question

我正在创建网站，我遇到了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;
}

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

Answer 1

查看这个例子的小提琴。我不知道你是否想要这样。但它也在IE上工作。核实。 Example

 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 */

检查并告诉我。感谢

Answer 2

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

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

我喜欢边框：1px纯红色;围绕我试图定位或调试某些东西的东西。希望有所帮助，抱歉答案不是更完整。

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

IE中不显示背景图片

2 个答案: