jQ Descendant Selector IE bug

jQ Descendant Selector bug in IE when running in IE7 mode

by riaanl

HTML

<div id="uiContainer">
        <div id="uiContainerX">
        <input type="text" id="txtName" name="txtName" value="x val" />
    </div>
    <div id="uiContainerY">
        <input type="text" id="txtName" name="txtName" value="y val" />
    </div>
    <hr/>Result:
    <div id="testResult"></div>
    <hr/>The result in ie with IE7 mode ON (http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx) is: 
<div id="ieResult">$('#uiContainerX #txtName').attr('id') :: txtName
<br/>--------------------------------------
<br/>$('#uiContainerY #txtName').attr('id') :: undefined
<br/>$('#uiContainerY [id=txtName]').attr('id') :: txtName
<br/>$('#txtName', '#uiContainerY').attr('id') :: txtName</div>
</div>

JavaScript

(function($) {
    $(document).ready(function() {
        $("#testResult").html("$('#uiContainerX #txtName').attr('id') :: " + $('#uiContainerX #txtName').attr('id') + "<br/>--------------------------------------<br/>"
            + "$('#uiContainerY #txtName').attr('id') :: " + $('#uiContainerY #txtName').attr('id') + "<br/>" 
            + "$('#uiContainerY [id=txtName]').attr('id') :: " + $('#uiContainerY [id=txtName]').attr('id') + "<br/>"
            + "$('#txtName', '#uiContainerY').attr('id') :: " + $('#txtName', '#uiContainerY').attr('id'));
    });
})(jQuery);