Я использую код jQuery для установки div в вычисляемой позиции с помощью margin-top (а не top), который отлично работает во всех браузерах, кроме IE8.(это работает в IE6 и IE7).
Я сузил проблему до того факта, что если я установлю верхнее поле с помощью jQuery, оно не будет обновляться в IE8, поле останется таким, как установленоCSS.Я видел на некоторых форумах, что это распространенная проблема IE8, и я нашел некоторые обходные пути для этого, но я обнаружил кое-что, что заставило меня задуматься, действительно ли это ошибка или нет ?!Я сократил весь код до следующего и все еще не работает:
Вот тело HTML:
<body>
<div class="menu_header"></div>
<div class="main_content"></div>
</body>
Вот код CSS:
.menu_header
{
position:relative;
background-color:red;
margin-left:auto;
margin-right:auto;
width:950px;
height:50px;
}
.main_content
{
position:relative;
margin-top:0px;
width:950px;
height:500px;
background-color:black;
margin-left:auto;
margin-right:auto;
}
И, наконец, вот код jQuery.
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
})
Что ж, если вы попробуете предыдущие коды в IE8, у вас будет правильно расположен первый div (.menu_header), НО второй div (.main_content) не будетесть какие-либо поля.Я подумал, что jQuery вообще не обновляет HTML / CSS и что первоначальное значение 0px все еще действует, поэтому я проверил с помощью инструментов разработчика в IE8 и обнаружил, что код CSS обновлен (встроенный CSS)но верхнее поле не отображается.
Как я уже сказал, в Интернете я обнаружил, что это известная ошибка IE8, которая произошла по разным причинам (например, сворачивание поля с установленным значением divfloat и другие объяснения, зависящие от CSS «содержимого»), но у меня изначально была часть кода jQuery, которая заставила меня задуматься о том, в чем на самом деле заключается эта ошибка, потому что ни одно из объяснений не может соответствовать этому?!
ЧтоУ меня в исходном коде jQuery было еще несколько строк, которые я сократил для ясности до следующего:
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
$(window).resize(function(){$(".main_content").css("margin-top","100px");})
})
Ну, в этом коде, как вы могли заметить, есть дополнительная строка (3-ялиния), которая устанавливает верхнюю границу, когда пользователь изменяет размер браузера и ВОЛШЕБНО, когда пользователь изменяет размер браузера, поляn-top обновляется и отображается правильно, но все еще не работает, когда документ готовится (2-я строка)!
Я продолжал играть (да, в этот момент это стало игрой, потому что Microsoft не может серьезно это делать!) и я заметил, что в HTML-коде, если я добавляю <p>some text</p> или <span>some text</span> или любой другой элемент с содержимым, после div проблема не возникает, и поле обновляется правильно.
Так что, в принципе, я не ищу обходных путей, так как у меня есть два, которые должны добавить div с содержимым и установить его высоту в 0 и переполнить: скрытый, чтобы он не изменил дизайн сайта или добавив <p> </p>после div.
Я просто надеюсь, что кто-то может объяснить мне, почему обновление поля не работает, когда документ готов, в то время как это происходит при resize (), и почему добавление HTML после div решает проблемуи есть ли другие решения, которые могут быть еще проще, чем у меня?