[英]floating div problem in IE7
我正在嘗試使用帶有浮動div的第二個背景圖像,但在IE6和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屬性,然后獲取窗口大小並將差異添加到容器div中,作為帶有Jquery的left屬性。 在所有IE版本中都可以正常運行,但是這次在Chrome上無法運行
有什么想法嗎?
..好吧,實際上我想我找到了解決方案。
我試圖將容器對准中心
我知道div是否沒有足夠的空間容納在窗口中,從而導致IE6和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)....
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.