Question

jQuery的:visible选择器似乎不适用于Internet Explorer 8中的TR元素，包括用hide()隐藏的TR。这是一个测试用例：

<html>
  <head>
    <script language="JavaScript" src="jquery-1.3.2.min.js"></script>
    <script language="JavaScript">
$(document).ready(function () { 
               $('#trb').hide();
               $('#trcount').html($('tr:visible').length);
               $('#pb').hide();
               $('#pcount').html($('p.item:visible').length);
});
    </script>
  </head>
  <body>
    <table>
      <tr><td>A</td></tr>
      <tr id="trb"><td>B</td></tr>
      <tr><td>C</td></tr>
    </table>
    <p><span id="trcount">?</span> rows are visible.</p>

    <p>Using paragraphs:</p>
    <p class="item">A</p>
    <p class="item" id="pb">B</p>
    <p class="item">C</p>

    <p><span id="pcount">?</span> paragraphs are visible.</p>
  </body>
</html>

在Chrome上，它会导致“2行可见”和“2段可见”，如预期的那样。但是，在Internet Explorer 8上，结果是“3行可见”，“2段”可见。

为什么呢？什么是解决它的最佳方法？（当我隐藏项目时，我能想到最好添加一个CSS类。）

Answer 1

这是jQuery 1.3.2的一个错误。要解决这个问题，请使用jQuery 1.4.2。

观察差异，比较IE中这两个jsFiddles 8：

<强> jQuery 1.4.2 - no problems alt text

<强> jQuery 1.3.2 - "3 rows visible" alt text

正如Patrick DW在评论中指出的那样， this answer points out the specific bug 。在同一个线程中有一个答案似乎暗示使用not:(:hidden)可以解决1.3.2中的问题，但事实并非如此。

为什么jQuery的：可见选择器在IE8上包含隐藏的TR？

1 个答案: