Question

我正在尝试使用浮动div的第二个背景图像，但它在IE6＆amp; 7

我知道浮动div在IE7和更低版本中是 * 的痛苦，但我真的需要让它工作。

这是我正在使用的代码

<body style="background-color:#FFFFFF; margin-top:0px; margin-right:0px;" topmargin="0"       rightmargin="0" leftmargin="0">
<div id="bg2" style="float:right; top:0px; width:450px; height:151px; margin-right:0px; padding-right:0px; font-size:1px; overflow:visible; background-image:url(images/back2.jpg);"></div>

<center>

<div style="position:relative; top:0px; width:1050px; margin:0px; padding:0px; vertical-align:top; text-align:left;">
....(huge div container)...

我还尝试从包含第二个背景图像的div中删除width属性，然后获取窗口大小，并使用Jquery将差异添加到容器div作为left属性。它适用于所有IE版本，但这次不适用于Chrome

here is a print screen

请问任何想法？

Answer 1

实际上，我认为我找到了解决办法。

我试图将容器对齐到中心

我知道如果没有足够的空间让div适合窗口，导致IE6＆amp; 7，所以我使用Jquery css属性来确定浮动背景图像div的宽度。

<script type="text/javascript">
$(document).ready(function() {
    if($(document).width() > 1050){          //Container's width:1050px
        var wd = document.body.clientWidth;
        wd = Math.round((wd-1050)/2); 
        $("#bg2").css("width" , wd);
        $("#container").css("left" , wd);
    }
});
</script>

和html ......

<body style="background-color:#FFFFFF; margin: 0px; padding: 0px;">
<p align="right">
<div id="bg2" style="position:absolute; float:right; top:0px; right:0px; height:151px; margin:0px; padding:0px; font-size:1px; overflow:visible; background-image:url(images/back2.jpg);"></div>
<div id="container" style="position:absolute; top:0px; width:1050px; margin:0px; padding:0px; vertical-align:top; text-align:left;">
....(huge div container container)....

在IE7中浮动div问题

1 个答案: