Can't select HTML5 element's children in IE8 with jQuery selector

前端 未结 2 864
青春惊慌失措
青春惊慌失措 2020-12-31 15:42

I found some posts with similar issues, but this is something different. I upgraded from jQuery 1.4 to 1.4.2 after I read another post, but the problem still presents itself

相关标签:
2条回答
  • 2020-12-31 15:47

    <section> is an HTML5 element not supported in IE8, you'll have issues using it as an element, including finding children beneath it. It isn't a jQuery problem, it's a basic DOM problem, here's a demonstration:

    All I'm doing is giving the element an ID to simplify things:

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

    Then try and get it's children:

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

    This gets you a 2 in HTML5 browsers, an 0 in IE.

    0 讨论(0)
  • 2020-12-31 16:11

    Internet Explorer 8 has quirky support for HTML 5, IE6 and IE7 plain just don't support it.

    You need to shiv the HTML 5 elements in order to style and properly use methods/properties such as innerHTML, getElementsByTagName on them.

    This will work in 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

    0 讨论(0)
提交回复
热议问题