背景图片在IE8上无法显示

Question

我已经阅读了其他的问题，但是没有结果 - 我真的想不出来。

该网站已经重新设计过，所以不再相关。它使用了HTML5元素，但它们没有被声明为块，IE不能假设它们应该是块。

页脚渐变在非IE浏览器中看起来很棒，但在IE7、8和IE9的开发预览版中无法显示。

有任何想法吗？

- Rich Bradshaw

---

我在FF3.5中没有看到任何梯度？ - Pekka

Answer 1

您可以尝试将以下内容添加到页脚CSS中（除了现有的页脚样式之外）。

footer
{    
    display:block;
}

这对我在Firefox 3.6中起到了作用，并且我认为在IE中也会解决 - <footer> 的默认显示样式是inline，无论在哪个浏览器中都不与背景兼容。将其应用于块会更像一个div。

您还需要注意使用HTML5时要小心。不确定它在所有浏览器中的支持情况。您可能需要考虑使用<div id="footer"><!-- footer内容 --></div>，并通过CSS按ID为其应用样式。

- KP.

---

什么鬼，为什么要踩我？哈哈。这个答案是可以的，也是有效的。如果能看到是谁踩的就好了，哈哈。 - KP.

我猜这是因为它只回答了Fx，而没有回答IE。 - Rich Bradshaw

你正在使用的“shiv”加上display: block;应该适用于IE。无论如何，您需要在标题、页脚、导航和可能使用的其他HTML5元素上添加display: block;。 - HaleFx

啊，我改了我的重置样式表，忘记把那一堆东西再加回去了... - Rich Bradshaw

Answer 2

我曾经遇到过类似的问题，但最终找到了解决方法。

将您的图像格式更改为png。

在IE8中可以正常工作。

- Jerry Garcia

Answer 3

这个有效：

#footer_text { 
  background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left; 
}

现在关于对html5元素（如页脚）应用任何样式的问题，我还是比较谨慎的。并不是所有浏览器都完全支持它们。

但出于语义化的考虑，您可以使用它们。

- Armstrongest

---

我正在使用 shim 在 IE<9 中启用它们，并且设置 display:block 似乎已经解决了问题。 - Rich Bradshaw

Answer 4

如果我使用IE 8的开发者工具栏查看页脚，我会得到以下内容作为background-image的定义：

 url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center

注意右侧的部分。我不确定它来自哪里 - 样式表中没有这个部分。也许样式表被某种方式搞乱了。如果我删除text-align部分，页脚图像就会正常显示。你的body定义也是同样的情况。

- Pekka

---

@Rich 当然。不过你试过KP的建议了吗？他说那个方法对他有用。另外，你可以试着去掉URL周围的引号，只是为了好玩？我感觉问题可能出在URL中的&和?符号上。 - Pekka

Answer 5

尝试在 Photoshop 或类似的软件中打开文件，并将其干净地保存为 PNG 格式。

- noinput