这对我来说有点尴尬，因为我已经用 CSS 工作了很长时间，所以我会被认为是专家。 然而!专家们每天都在学习新事物。
好吧，我的问题是，这个带有完全拉伸(stretch) Bg 图像的示例代码在 Chrome 和 FF 中都工作得很好，它也应该在 IE 中工作(至少 IE8)但我就是无法让它工作，图像显示但是文本在图像下方换行，就像内容框未设置为相对定位一样。
希望你能帮帮我。
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li><a href="index.php">Forside</a></li>
<li><a href="video.php">Se video</a></li>
<li><a href="virk.php">Udbyd tilbud</a></li>
<li><a href="info.php">Information</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="../Zhoop.apk">Hent: android</a></li>
</ul>
</div>
最佳答案
首先，您为什么要使用 <img/>定义页面背景图案。
这种背景直接在css中定义比较合适。
例如:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}
关于html - CSS stretch bg 图像在 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7671189/