Странная ошибка высоты div: ошибка webkit или jQuery? - PullRequest
Новая
       19

Странная ошибка высоты div: ошибка webkit или jQuery?

1 голос
/ 14 марта 2011

У меня есть простое приложение для веб-страниц, у которого есть два плавающих элемента div для контента.

Небольшой кусочек jquery устанавливает высоту этих div'ов, посмотрев на высоту родительского div и выполнив простой расчет

Этот подход прекрасно работает в Firefox и IE ... и также впервые работает в Safari и Chrome ...

Но когда страница перезагружается в Safari или Chrome ... правый и левый дивы волшебным образом увеличивают свою высоту примерно на 200 пикселей без всякой причины.

Сделайте жесткое обновление ... и высота div вернется к норме

Пожалуйста, сообщите! это очень странно - 

<div class="holder1"  > 

<!--      LEFT HAND BOX     --> 

<div id="left-box" class="half left"> 
<div class="info-box">  
<h2>Left Hand Content</h2>  


 ------------- Left content here----------------------

</div>  
</div> 

<!--      RIGHT HAND BOX     -->

<div id="right-box" class="half right" >
<div class="info-box">  
<h2>Right Hand Content</h2> 

 -------------Right content here----------------------      

</div>      
</div> 

<div class="clearfix"></div>    
</div> 

<!--    END RIGHT and LEFT BOXES    -->

<div>   more content here  </div>

     <script language="javascript"> 
            var new_height =  $('#left-box').closest('.holder1').height() -25;
            $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);

    </script>

Ответы [ 5 ]

0 голосов
/ 06 января 2016

Эта проблема jQuery, связанная с тем, что Webkit не может определить высоту элемента после перезагрузки или обновления, существует уже некоторое время.Эти возможные решения стоит попробовать:

Метод 1

Попробуйте использовать jQuery(window).load вместо jQuery(document).ready, например: 

jQuery.noConflict();
jQuery(window).load(function() { // <--

    var myheight = jQuery(".mydiv").height();
    jQuery(".this-div-uses-calculated-height-as-padding").css( "padding-top", myheight ); 

});

Источник

Метод 2 (поддерживается более чем на 90% + браузеров, но не IE8)

Если вышеуказанный подход вызывает некоторые проблемы между Webkitи другие браузеры, рассмотрите возможность использования этого: 

document.addEventListener("DOMContentLoaded", function(event) { 
    // your script
});

Источник

Метод 3 (не изящный, но у него самый высокий шансдля правильной работы во всех браузерах)

И если даже это не работает, вы можете попробовать менее чистый способ, сначала обнаружив браузер, а затем применив скрипт в зависимости от того, является ли он веб-набором или нет: 

jQuery.noConflict();

isWebkit = /(safari|chrome)/.test(navigator.userAgent.toLowerCase());

if (isWebkit){
    jQuery(window).load(function() { // <--            
         // your script    
    });
}

else{
    jQuery(document).ready(function() { // <--
        // your script
    });
}

Другим подходом может быть включение любых файлов CSS до включения файла jQuery.

0 голосов
/ 29 мая 2012

Я думаю, что нашел решение. У меня была похожая проблема при попытке изменить высоту DIV (содержащую плавающие DIV) на основе родительской высоты DIV (которая имела высоту auto). Он отлично работал с IE, но не с Chrome. В Chrome родительский DIV даже не имел нужной высоты, как если бы Chrome не считал плавающий DIV как часть родительского DIV.

Чтобы решить проблему, мне пришлось изменить стиль родительского DIV, добавив «float: left», чтобы сделать его «float». В вашем коде CSS это будет: 

.holder { border:red dotted 1px; float:left }

Видите, теперь мы видим DIV родительский пунктир с красной точкой: http://jsfiddle.net/bytKE/46/

0 голосов
/ 14 марта 2011

Попробуйте, у меня все работает: 

 <script type="text/javascript">
    jQuery(function($){
        $('.holder1 > .half').each(function(){
            var height = 0, actual_height;
            var actual_height = $(this).height();
            if(actual_height > height){ height = actual_height; }
            $('.holder1 .info-box').height(height);
        });
    });
</script>
0 голосов
/ 15 марта 2011

спасибо за все идеи ... это, похоже, больше всего помогло, когда я обновляю jQuery include с 1.4 до 1.5 ..

вот скрипка, которая работает для меня в FF, IE, Safari и Chrome ..

http://jsfiddle.net/bytKE/11/

0 голосов
/ 14 марта 2011

Вы уверены, что DOM создан, когда работает javascript? Попробуйте 

 <script type="text/javascript">
    $(function() {
        var new_height =  $('#left-box').closest('.holder1').height() -25;
        $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);
    }
</script>
...