html - 图片在 IE8 或更早版本上不可见

Question

我有一个根据窗口大小缩放的图像。它在 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 上查看问题.

我该如何解决这个问题？

Answer 1

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

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

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

编辑

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

.home_main img {
    height: auto;
}

编辑2

你的背景<p> - 标签是透明的，因为 CSS 是这么说的；)现在的值是 background: none transparent scroll repeat 0% 0%这是平等透明的。在 Chrome 中，我可以看到你使用 rgb();和 rgba();对于 background ，它不能在 IE8 中显示，因为它是 CSS3。

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

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