图片在 IE8 或更早版本上不可见答案

【问题标题】：Image not visible on IE8 or older图片在 IE8 或更早版本上不可见
【发布时间】：2014-07-18 15:49:26
【问题描述】：

我有一个可以根据窗口大小进行缩放的图像。它在 IE9+、Chrome、Safari 和 Firefox 上运行良好，但在 IE8 或更早版本上不显示。

HTML 代码：

<div class="home_main">
    <img src="main_blur.jpg"/>
    <div class="text_and_button">
        <p>Some text</p>
        <p> more text</p>
        <a href="Contacts.php" class="contact_button">Button text</a>
    </div>
</div>

我的 CSS 代码：

.home_main {
    position: relative;
    width: 100%;
    padding-bottom: 31%;
    float: left;
    height: 0;
}

.home_main img {
    min-height: 300px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

.home_main p {
    padding: 30px 50px 20px 50px;
    color: #FFFFFF;
    background: rgb(66,91,122);
    background: rgba(66,91,122,.6);
    font-size: 54px;
    font-family: BebasNeue;
    font-weight: normal;
}

此外，段落应该有彩色背景，并且页面顶部的菜单不会出现。

您可以在www.mediata-sa.pt查看问题。

我该如何解决这个问题？

【问题讨论】：

可以添加display:block;
@AlexWilson 刚刚尝试了您的解决方案，但问题仍然存在。
为什么容器上有height: 0;？我删除了这个，它并没有产生明显的差异

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

您网站的DOCTYPE 是XHTML 1.0 Strict，这意味着必须关闭DOM 中的每个元素。

您的<img> 不是 - 这仅适用于 HTML5。同样在 XHTML 中，<img>-tag 需要 height="" width="" 属性，这可能会导致 IE8 中的错误。不要担心你的 CSS，这会覆盖你 <img> 的内联属性。

试试<img src="XXX" height="XXX" width="XXX alt="XXX" />。

编辑

IE8 似乎也不喜欢图像上的height: 100%;，这就是它没有显示的原因。这解决了我的问题：

.home_main img {
    height: auto;
}

编辑2

<p>-tags 的背景是透明的，因为 CSS 是这么说的 ;) 现在的值是 background: none transparent scroll repeat 0% 0%，它是透明的。在 Chrome 中，我可以看到您使用 rgb(); 和 rgba(); 来表示 background，因为它是 CSS3，所以无法在 IE8 中显示。

在 IE8 中，颜色必须是 CSS2 标准，例如只有 HEX 或关键字颜色。

.home_main p {
    background: blue; // IE8 fallback
    background: rgb(66,91,122);
    background: rgba(66,91,122,.6);
}

【讨论】：

我按照你说的修改了img上的属性，但问题依然存在。
@belyid 编辑了我的答案。
图像现在可见。另一方面，文本应该有背景颜色，我看不到顶部菜单（我更新了问题）。你能帮我解决这个问题吗？

【解决方案2】：

尝试从

更新 DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

致<!DOCTYPE html>

IE8 中的当前 html 进入 IE5 怪癖文档模式。使用新的文档类型更新时可以正常工作。

这应该可以解决问题。

【讨论】：

分享一个工作链接，以便我可以在 IE8 中调试问题。
我刚刚添加了问题的链接。
尝试使用更新 DOCTYPE
我不明白你的建议。我已经有了。
这不是真的。仅将 html 作为 doctype 在 IE8 中仍然是有效的 doctype，并且不会导致 quirksmode。