Question

我发现了一些类似问题的帖子，但这有些不同。在我阅读了另一篇文章后，我从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

有什么想法吗？任何人都...？

Answer 1

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>

现场演示：http://medero.org/html5.html

Answer 2

<section>是IE8中不支持的HTML5元素，使用作为元素时会遇到问题，包括在其下面查找子元素。这不是一个jQuery问题，它是一个基本的DOM问题，here's a demonstration：

我正在做的就是给元素一个ID以简化事情：

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

然后尝试让它成为孩子们：

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

这会让你在HTML5浏览器中获得2分，在IE中为0分。

无法使用jQuery选择器在IE8中选择HTML5元素的子元素

2 个答案: