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

Question

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

javascriptjquerydomhtmlinternet-explorer-8

9

我发现了一些类似的帖子，但这是另一回事。在阅读另一篇文章后，我将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

有什么想法吗？有人可以帮忙吗...？

- jedmao

2个回答

3

<section>是一个HTML5元素，在IE8中不支持，使用它会有问题，包括在其下找到子元素。这不是jQuery的问题，而是一个基本的DOM问题。这里有一个演示：链接

我所做的只是给元素设置一个ID以简化操作：

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

然后尝试获取它的子元素：

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

这将在HTML5浏览器中得到2分，在IE中得到0分。

- Nick Craver

你可以手动创建元素，这样IE就能正确支持样式和DOM操作。此外，Jonathan Neal提供了一种修复方法，用于打印HTML 5元素，因为IE本身不支持HTML 5元素的打印。 - meder omuraliev

@meder - 确实，我的回答是关于为什么不起作用的问题，而html5shiv代码存在其他问题（http://code.google.com/p/html5shiv/issues/list），因此这不是一个快速解决方案。另外，对于您的示例，请确保具有有效的HTML，否则它不是一个有效的测试 :) - Nick Craver

@sfjedi - 例如，一个HTML文档需要一个<head>。 - Nick Craver

一个<head>和<title>对我的测试用例没有影响。<body>元素也是一样的。 - meder omuraliev

幸运的是，我们都很聪明，可以弄清楚那部分。感谢meder提供的例子。 - jedmao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meder omuraliev · Accepted Answer

Internet Explorer 8对HTML 5的支持存在问题，而IE6和IE7则根本不支持。

您需要使用shiv技术来处理HTML 5元素，以便可以对它们进行样式设定，并且可以正常地使用 innerHTML、getElementsByTagName等方法/属性。

这样在IE 6-8中就可以工作了：

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