Я использую код jQuery для установки div в вычисленной позиции с использованием margin-top (а не верхнего), который отлично работает во всех браузерах, кроме IE8. (он работает в IE6 и IE7).margin-top, установленный через jQuery в IE8, не обновляется
Я сузил проблему до того, что, если я установил верхний край с помощью 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, которая произошла по разным причинам (например, крах, сбрасываемый с помощью набора div для плавания и других объяснений в зависимости от содержимого «CSS»), но Я изначально был частью кода jQuery, который заставлял меня задаться вопросом, что это за ошибка, потому что ни одно из объяснений не может соответствовать этому?!
То, что я имел в исходном коде JQuery есть несколько строк, которые я сводится к следующему для ясности:
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
$(window).resize(function(){$(".main_content").css("margin-top","100px");})
})
Ну, в этом коде, как вы, возможно, заметили, имеется дополнительная line (3-я строка), которая устанавливает верхний край, когда пользователь изменяет размер браузера и MAGICALLY, когда пользователь изменяет размер браузера, обновляет маржу и отображает правильно, но все еще не работает, когда документ готов (вторая строка)!
Я продолжал играть (да, на данный момент это стало игрой, потому что Microsoft не может быть так серьезно!), И я заметил, что в коде HTML, если я добавлю <p>some text</p> или <span>some text</span> или любой элемент с содержимое, после div, проблема не возникает, и маржа обновляется правильно.
Итак, в основном, я не ищу обходные пути, так как у меня есть два, которые должны добавить div с содержимым и установить его высоту в 0 и переполненный: скрытый, чтобы он не изменял дизайн веб-сайта или добавляя <p> </p> после дива.
Я просто надеюсь, что кто-то может объяснить мне, почему обновление поля не работает, когда документ готов, когда он выполняется при изменении размера(), и почему добавление некоторого HTML после того, как div решает проблему и есть ли какие-либо другие решения что может быть еще проще, чем тот, который у меня есть?
Пробовали ли вы присоединение его к '$ (окно) .load()', а также ? '' содержит 'img'? также jsfiddle, чтобы играть с поможет – mreq
Я создал новые файлы HTML/CSS/JS только с приведенным здесь кодом (и ничего, кроме раздела заголовка HTML, которое здесь отсутствует), и проблема точно такая же, как описано. Использование '$ (window) .load()' не решает проблему. Как я уже сказал, встроенный CSS обновляется при проверке с помощью отладчика, что означает, что событие ready() запущено правильно, а код jQuery работал, но даже если он установлен в встроенном CSS скриптом jQuery, поля не отображаются вообще , –
Это может быть проблема css. Попробуйте установить «margin-bottom» на предыдущем элементе (.menu-header) вместо «margin-top» следующим образом. Если вы настаиваете на стилизации .main-content, попробуйте 'padding' – mreq