html - 背景未在 IE 中显示,但在 Chrome 中工作正常

标签 html css internet-explorer google-chrome

我有以下html代码

HTML:

<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page-back">
<img id="bg" src="background.jpg" width="100%" height="100%" >
</div>
<center>
<div id="content" align="center"><br>
<a href="#">Souvenir</a><br><br>
<a href="#">Gallery</a><br><br>
<a href="#">Presentations</a><br><br>
<a href="#">Principal's Message</a><br><br>
<a href="#">About</a><br><br>
</div></center>
</body>
</html>

CSS:

@charset "utf-8";
html { 
    overflow-y:hidden;
}
body {
    overflow-y:auto;
}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#page-back {
    position:absolute;
    z-index:-1;
}
#content {
    width: auto;
    height: 530px;
    margin-top: 200px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow-y: auto;
    font-size: 30px;
    font-family: "Century Gothic";
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
#content a {
    text-decoration: none;
    color: #000000;
}

此代码在 Chrome 中工作正常,但在 IE 中图像

<img id="bg" src="background.jpg" width="100%" height="100%" >

未显示。尝试了很多东西,但没有任何效果!

应该改变什么?

谢谢

最佳答案

尝试添加 position:relative;到#bg 标签。我的猜测是,因为您使用的是 z-index,所以它上面可能有其他东西,导致它不显示。如果没有,请告诉我,我会帮助解决这个问题。

具有绝对位置的#page-back 也可能导致此问题。

关于html - 背景未在 IE 中显示,但在 Chrome 中工作正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21563518/

相关文章:

javascript - Jquery Ajax IE后访问getElementsByName数组

JavaScript 无法在 IE 上运行

html - 在 alt 标签上使用本地语言好吗?

html - 如何以响应方式处理数据列?

HTML 被推送到导航栏上的第二行

php - 如何使用 html 标签对字符串进行 base64 编码和 base64 解码?

CSS ul.topnav li a :active

css - 为什么我的 div 没有脱离父 div?

html - 在单个元素上继承多个文本装饰

javascript - IE7/8 Javascript 陷阱