Question

我的图像会根据窗口大小进行缩放。它适用于IE9 +，Chrome，Safari和Firefox，但它不会出现在IE8或更早版本上。

HTML code：

<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; }

<强> EDIT2

<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); }

Answer 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怪癖文档模式。哪个用新的doctype更新工作正常。

这应该可以解决问题。

图像在IE8或更早版本上不可见

2 个答案: