title: Why does jQuery's :visible selector include hidden TRs on IE8?
body: <p>jQuery's <a href="http://api.jquery.com/visible-selector/" rel="nofollow noreferrer">:visible</a> selector seems not to work on TR elements in Internet Explorer 8 in the sense that includes TRs that have been hidden with <a href="http://api.jquery.com/hide/" rel="nofollow noreferrer">hide()</a>.  Here is a test case:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script language="JavaScript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script language="JavaScript"&gt;
  $(document).ready(function () { 
                 $('#trb').hide();
                 $('#trcount').html($('tr:visible').length);
                 $('#pb').hide();
                 $('#pcount').html($('p.item:visible').length);
  });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table&gt;
        &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;/tr&gt;
        &lt;tr id="trb"&gt;&lt;td&gt;B&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;p&gt;&lt;span id="trcount"&gt;?&lt;/span&gt; rows are visible.&lt;/p&gt;
  
      &lt;p&gt;Using paragraphs:&lt;/p&gt;
      &lt;p class="item"&gt;A&lt;/p&gt;
      &lt;p class="item" id="pb"&gt;B&lt;/p&gt;
      &lt;p class="item"&gt;C&lt;/p&gt;
  
      &lt;p&gt;&lt;span id="pcount"&gt;?&lt;/span&gt; paragraphs are visible.&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On Chrome, it results in “2 rows are visible” and “2 paragraphs are visible,” as expected.  On Internet Explorer 8, however, the result is “3 rows are visible” and “2 paragraphs” are visible.</p>
  
  <p>Why?  And what is the best way to work around it?  (The best I can think of it to add a CSS class when I hide an item.)</p>