проблема плавающего div в IE7 - PullRequest
Новая
       15

проблема плавающего div в IE7

0 голосов
/ 27 декабря 2010

Я пытаюсь использовать второе фоновое изображение с плавающим 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, который содержит 2-е фоновое изображение, затем получить размер окна и добавить разницу кконтейнер DIV как левый атрибут с Jquery.Это работало нормально во всех версиях IE, но на этот раз не на Chrome

вот экран печати

есть идеи, пожалуйста?

1 Ответ

0 голосов
/ 27 декабря 2010

.. ну на самом деле я думаю, что нашел свое решение.

Я пытался выровнять контейнер по центру

Я знал, что для размещения 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)....
...