0

私は何か基本的な間違ったことをしているかもしれませんが、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 を左にフロート、幅 100%

Div を左にフロート、幅 80%

フロートを削除するか、マージンを自動に設定すると、背景が正常にレンダリングされます

フロートを取り外した

背景の配置を削除すると、フロートに関係なく背景が正常にレンダリングされます

背景位置が削除されました

何が問題なのかわからない。

4

1 に答える 1

0

デモ: 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;
}​
于 2012-06-07T04:09:13.093 に答える