Question

可能是我做了一些基本错误的事情，但Chrome / FF的情况似乎没问题但与IE8有关（我还没试过其他版本）。

我为body标签设置了背景设置，并定义了背景位置。这就是html的外观。

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style>
body {
    background:#fff url(skyhouse.jpg);
    background-position: bottom left;
    background-repeat: repeat-x;
}
</style>
</head>
<body>
<div style="width: 100%;float: left;">
    <div style="background-color: yellow;height: 400px;width: 400px;">
    </div>
</div>
</body>
</html>

当我在body标签后面有一个div标签和一个浮动（左或右）的div标签时，我看到背景没有正确呈现。

Div floated left, width 100%

Div floated left, width 80%

当我移除浮动或将边距设置为自动时，背景渲染确定

Float removed

如果删除背景定位，无论浮点数如何，背景渲染都会很好

background position removed

不确定是什么问题。

Answer 1

DEMO：http://jsfiddle.net/aHkJ5/1/

适用于此 -

html, body{
    height: 100%;
    width: 100%;
}
body {
    background:#fff url(http://www.makems.com/graphic/rainbow-abstract.jpg);
    background-position: left bottom;
    background-repeat: repeat-x;
}

IE8 - 背景没有出现背景位置和浮动属性

1 个答案: