jQuery outerHeight возвращает неправильное значение IE

Question

Я пытаюсь получить высоту элемента на странице. Я получаю ожидаемое значение (700 пикселей или около того) в FF и Webkit на Mac, но я получаю значение 0 в IE8. Я еще не пробовал более ранние версии IE.

HTML:

<section> 
    <article> 
    ... 
    </article> 

JavaScript:

var height = myElement.outerHeight(true); 

Есть целый ряд вещей, которые можно было бы осложняющих это.

1. Я пытаюсь измерить элемент сразу после того, как она динамически добавляется к странице (элемент является добавляется в качестве результате AJAX запроса),
2. элемент Я пытаюсь меру - элемент html5 (раздел).

Я заметил, что вставленные элементы html5 плохо отформатированы при просмотре с помощью инструментов разработчика. Я получаю такие вещи, как </article/>. Все, что было частью страницы при ее загрузке, выглядит отлично.

Некоторые вещи, которые я пробовал в попытке решить эту проблему:

1. я добавил CSS, чтобы применить дисплей: блок ко всем элементам html5
2. Я добавил Remy Sharp в «html5 что позволяет сценарий» (http://remysharp.com/2009/01/07/html5-enabling-script/)
3. Я использую
4. Я пытался использовать все дивы вместо html5 элементы
5. myElement.height() возвращает значение из 'auto' в IE8, тогда как в других браузерах я получаю значение в пикселях. innerHeight() возвращение товара null.

Благодаря

Answer 1

Я заметил, что вставленные элементы html5 плохо отформатированы при просмотре с помощью инструментов разработчика. Я получаю такие вещи, как </article/>

Это не плохое форматирование, это инструменты разработчика, которые говорят вам, как выглядит IE DOM.Это IE не удается правильно проанализировать элементы HTML5, что приводит к тому, что элементы не находятся там, где вы их ожидаете, и, следовательно, высота и рендеринг не соответствуют тому, что вы ожидаете.

Что происходит, что IE обрабатывает неизвестные элементы, как всегда являются элементы с моделью EMPTY содержания: элементы, такие как <img/> или <br/>, которые никогда не имеют крупный тега (требующий Самозапирающийся синтаксис XHTML). Поэтому, когда IE видит <section>, он создает и закрывает элемент section. Затем следующий элемент, <article>, приходит после<section/> и не внутри него. Когда IE видит </section>, он считает, что это не тег close, а пустой тег, имя - /section (что, конечно, совсем недействительно, но тогда, когда IE об этом позаботился?).

Таким образом, высота элемента <section/>, который ничего не содержит, скорее всего будет равна нулю, и если вы поместите на нее фон, фон не будет охватывать <article/>.

Как уже упоминалось Ник, то html5shiv может исправить некоторые этих проблем с помощью createElement временно обмануть IE, думая, что знает, что <section> является реальным элементом. Это действительно не охватывает всю проблему, хотя, когда вы начинаете трахаться с дальнейшими операциями синтаксического анализа, такими как установка innerHTML, это снова пойдет не так. Следующий этап - попытаться обойти это с помощью innershiv; есть некоторые недостатки производительности, поэтому убедитесь, что вы используете его только в IE, и только тогда, когда вам нужно (это не так надежно, как интерфейс html() jQuery).

Лично я не вижу большой пользы для всех этих хлопот. На данный момент <section/> на самом деле не дает вам ничего, что <div class="section"> этого не делает. В будущем могут быть инструменты, которые могут что-то сделать с семантикой, а создание сайтов в IE6-8 совершенно нецелесообразно. Но этот день далеко от ИМО.

Answer 2

IE8 просто не поддерживает эти элементы ... хотя он пытается корректно отобразить их, ряд функций, не будет возвращать правильно включая размеры.

Это просто разница между браузерами, поддерживающими элементы и браузеры, которые их предварительно задали, вы можете попробовать свои удачи в некоторых библиотеках поддержки HTML5, таких как HTML5 Shiv, вот вам лучший выбор.