Нечетное поведение IE8 html5shiv

Question

Нечетное поведение IE8 html5shiv

0

Рассмотрим следующее...

<!DOCTYPE>
<html>
<head>
    <title></title>
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        main{
            width:500px;
            height:500px;
            margin:0 auto;
            border:5px solid red;
            display:none;  
        }
    </style> 
</head>
<body>
    <main>
        <h1>Test</h1>
    </main>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        //load some external content then on callback...
        $('main').show();
    });
</script>
</html>

Работает отлично в каждом браузере, но IE8 (шокер). Если вы удалите display:none; то все хорошо, поэтому я предполагаю, что это проблема. Но почему?

То, что я пытаюсь выполнить

<main> - моя оболочка, содержащая <nav>, <footer> и <div> для ввода контента через ajax-вызов. При загрузке сайта и добавлении содержимого целевой страницы в пустой держатель содержимого <div> происходит небольшое неудобное мерцание. Не огромная сделка, но мне хотелось, чтобы что-то было проще на глазах, поэтому я добавил display:none; к определению main стиля и добавил show() или fadeIn() после загрузки содержимого, чтобы предотвратить мерцание. Работает... кроме IE8. Его как будто <main> теряет свой display определяемый shiv, и по умолчанию - inline.

Вещи, которые я пробовал

Я заменил <main> <div id="main"> и это отлично работает. Но я пытаюсь использовать HTML5 и хотел бы использовать <main>.

Я знаю, что это мало, я просто расстраиваюсь, когда не понимаю, почему.

zgood 25 сен. 2013, в 22:04

Источник

Теги:

jquery

css

html5

internet-explorer-8

1 ответ

Ещё вопросы

bphillips · Accepted Answer · 2013-09-25T17-24-00.000Z

Не могу взять на себя полную ответственность за это... другой разработчик, с которым я работаю, - это jQuery yoda....

По умолчанию jQuery добавляет стиль css 'display: inline;' для тегов элементов. Поскольку "основной" не определен как известный элемент (например, div) в IE, он по умолчанию имеет значение "inline". Несколько решений могут быть следующими:

$('main').css('display','block');

или для затухания:

var $main = $('main');
$main.css('display','block').hide().show(600); //--not yet tested

Очень хорошо! Это сработало, спасибо. Этот jQuery yoda должен быть заложен ежедневно ... что за гвоздик! лол
эээ ... я не знаю ... я попрошу ... может сделать вещи некомфортными, обычно я воспитываю только когда он капризный (например, "чувак, тебе так нужно лежать") или когда я капризный (например, "иди ... хм ... уложить себя")