Невозможно выбрать дочерние элементы HTML5 в IE8 с помощью селектора jQuery - PullRequest
9 голосов
/ 28 июля 2010

Я нашел несколько сообщений с похожими проблемами, но это нечто другое. Я обновил jQuery 1.4 до 1.4.2 после того, как прочитал другой пост, но проблема все еще остается. Я также попытался запустить IE 8 в режиме совместимости, но ничего не получалось. Конечно, он отлично работает в Chrome.

Вот разметка:

<section class="pleaseWaitButton">
    <p><img src="images/please_wait.png" alt="Please wait" /></p>
    <p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p>
</section>

Вот единственный селектор jQuery, который работает в этом сценарии ...

$('.pleaseWaitButton').length // 1

А вот селекторы jQuery, которые не будут работать!

$('.pleaseWaitButton').find('input').length // 0
$('.pleaseWaitButton input').length // 0
$('.pleaseWaitButton > p > input').length // 0

Есть идеи? Кто-нибудь ...?

Ответы [ 2 ]

10 голосов
/ 28 июля 2010

Internet Explorer 8 имеет необычную поддержку HTML 5, IE6 и IE7 просто не поддерживают ее.

Вам необходимо shiv элементы HTML 5 чтобы стилизовать и правильно использовать методы / свойства, такие как innerHTML, getElementsByTagName для них.

Это будет работать в IE6-IE8:

<!doctype html> 
<html> 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<section class="pleaseWaitButton"> 
    <p><img src="images/please_wait.png" alt="Please wait" /></p> 
        <p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p> 
</section> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script> 
    alert( $('.pleaseWaitButton').find('input').length ) 
    alert( $('.pleaseWaitButton input').length ) 
    alert( $('.pleaseWaitButton > p > input').length ) 
</script> 
</html> 

Live Demo: http://medero.org/html5.html

3 голосов
/ 28 июля 2010

<section> - это элемент HTML5, который не поддерживается в IE8, у вас возникнут проблемы с его использованием в качестве элемента, включая поиск дочерних элементов под ним.Это не проблема jQuery, это базовая проблема DOM, вот демонстрация :

Все, что я делаю, это даю элементу идентификатор для упрощения вещей:

<section class="pleaseWaitButton" id="btn">

Тогда попробуйте получить детей:

document.getElementById('btn').children.length

Это даст вам 2 в браузерах HTML5 и 0 в IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...