空标签元素和:visible？

Question

空标签元素和:visible？

3

我正在使用最新的jQuery版本（1.9.1）。

我有一个空的元素：

<!DOCTYPE html>
 <html>

    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>

    <body> <span class="c"></span>

    </body>
    <script type='text/javascript'>
        alert($(".c:visible").length);
    </script>

</html>

Chrome（最新版本）警告0
FF（最新版本）警告1
Ie（8）警告0

为什么在 Chrome 上没有警告 1？该元素没有被隐藏。

我可以通过使用过滤器并输出所有的!display:none来解决这个问题，但我想知道我是否做错了什么。

http://jsbin.com/urihov/2/edit

- Royi Namir

2

在火狐和Safari中，它会弹出0。 - Subodh Ghulaxe

3

根据 jQuery 文档：如果元素在文档中占用空间，则认为它们是可见的。可见元素的宽度或高度大于零。 - inser

FF：在 jsbin 中它会弹出 0，而在 jsfiddle 中它会弹出 1，http://jsfiddle.net/hvf9R/。 - Ram

请在不同的浏览器中检查此链接： http://jsfiddle.net/hvf9R/1/看起来火狐浏览器会添加额外的高度（19像素）。 - inser

参见：http://bugs.jquery.com/ticket/13132 看起来这个问题将在1.12/2.2版本中得到解决！ - Glen Little

显示剩余5条评论

1个回答

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

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

- Ady Ngom · Accepted Answer

@inser是正确的，span是一个内联元素，只有在拥有内容时才会获得布局，从而获得其内容的宽度和高度-在这种情况下，宽度和高度为0，因此对用户不可见，如果您添加此CSS规则

.c {
  display: block;
}

你会发现警告框现在显示为1，因为你已经将其强制转换为块级元素，从而继承了其父元素的宽度并获得了布局。

希望对你有所帮助，

祝好