代码之家 › 专栏 › 技术社区 › jedmao

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

internet-explorer-8 html5 dom jquery javascript

9

jedmao · 技术社区 · 16 年前

我发现了一些类似的问题,但这是不同的东西。在我读了另一篇文章之后,我从jquery1.4升级到了1.4.2,但是问题仍然存在。我也试过在兼容模式下运行IE8,但似乎什么都没用。当然,它在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>

这是唯一一个在这种情况下工作。。。

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

这里的jQuery选择器将不起作用!

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

有什么想法吗?有人。。。?

2 回复 | 直到 16 年前

1

10

meder omuraliev 16 年前

InternetExplorer8对HTML5、IE6和IE7有着奇特的支持,只是不支持而已。

shiv HTML5元素 为了设计和正确使用innerHTML等方法/属性,请对其使用getElementsByTagName。

<!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

2

3

Nick Craver 16 年前

<section> 是IE8不支持的HTML5元素,使用它会有问题作为 here's a demonstration :

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

然后试着让孩子们:

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

这会在HTML5浏览器中得到2,在IE中得到0。