jQuery的:visible选择器似乎不适用于Chrome中的一些内联元素。解决方案是添加一个显示样式，比如“block”或“inline-block”来让它工作。

另外请注意，jQuery对可见内容的定义与许多开发人员有所不同:

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

换句话说，一个元素必须具有非零的宽度和高度才能占用空间并可见。

能见度:hidden或不透明度:0的元素被认为是可见的， 因为它们仍然占用布局中的空间。

另一方面，即使它的可见性被设置为隐藏或不透明度为零，它仍然对jQuery可见，因为它消耗空间，当CSS显式地表示其可见性为隐藏时，这可能会令人困惑。

不在文档中的元素被认为是隐藏的;jQuery是 类时，无法知道它们是否可见 文档，因为它取决于适用的样式。 所有选项元素都被认为是隐藏的，不管它们是什么 选中状态。 在动画中隐藏元素时，会考虑该元素 直到动画结束都可见。在动画中显示 元素时，该元素被认为在开始处可见 动画。

看它最简单的方法是，如果你能在屏幕上看到元素，即使你看不到它的内容，它也是透明的，它是可见的，也就是说它占据了空间。

我稍微清理了一下你的标记，并添加了一个显示风格(即设置元素显示为“块”等)，这对我来说是有效的:

小提琴

官方API参考:可见

从jQuery 3开始，:visible的定义发生了轻微的变化

jQuery 3稍微修改了的含义:可见的(因此是的) :隐藏)。 从这个版本开始，将考虑元素 :如果它们有任何布局框，包括那些零宽度的布局框，则可见 和/或高度。例如，br元素和带有no . 内容将由:visible选择器选择。

我不知道为什么你的代码不能在chrome上工作，但我建议你使用一些变通办法:

$el.is(':visible') === $el.is(':not(:hidden)');

or

$el.is(':visible') === !$el.is(':hidden');  

如果你确定jQuery在chrome中会给你一些不好的结果，你可以依靠css规则检查:

if($el.css('display') !== 'none') {
    // i'm visible
}

另外，您可能希望使用最新的jQuery，因为它可能修复了旧版本的bug。

如果你读过jquery文档，你会发现有很多不可见/隐藏的原因:

它们的CSS显示值为none。

它们是带有type="hidden"的表单元素。

它们的宽度和高度显式地设置为0。

祖先元素是隐藏的，因此该元素不会显示在页面上。

http://api.jquery.com/visible-selector/

下面是一个带有一个可见元素和一个隐藏元素的jsfiddle小例子:

http://jsfiddle.net/tNjLb/

我需要使用可视性:hidden而不是display:none，因为可见性需要事件，而显示不需要。

因此写入。attr('visibility') === "visible"

一个跨浏览器/版本的解决方案来确定一个元素是否可见，是添加/删除一个css类的元素显示/隐藏。元素的默认(可见)状态可以是这样的:

<span id=“span1” class=“visible”>span text</span>

然后在hide上删除类:

$ (" # span1”).removeClass(“可见”)hide ();

在节目中，再次添加:

$ (" # span1”).addClass(“可见的”),告诉();

然后，使用下面的命令来确定元素是否可见:

如果($ (" # span1 ") .hasClass(“可见”)){/ /做某事}

这也解决了在大量使用":visible"选择器时可能出现的性能影响，jQuery文档中指出了这一点:

大量使用此选择器可能会影响性能，因为它可能迫使浏览器在确定可见性之前重新呈现页面。通过其他方法跟踪元素的可见性，例如使用类，可以提供更好的性能。

jQuery官方API文档:visible选择器

一般来说，当我的对象的父对象被隐藏时，我就会遇到这种情况。 例如，当HTML是这样的:

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

如果你问child是否可见，比如:

    $(".div-child").is(":visible");

它将返回false，因为它的父元素不可见，所以div也不可见。