Question

我正试图让它发挥作用：

<!doctype html>
<html>
<style>
    section{
        display: none;
    }
    section:only-child {
        display: block;
    }   
</style>
<body>
    <section>This should be visible</section>   
</body>
</html>

我相信应该看到“这应该是可见的”文字！在Firefox中也是如此。 Firebug以及Safari的Web Inspector也这么认为。

但是，如果您在Safari（OSX和iPhone）中打开该页面，则不会显示该文本。这是为什么？

Answer 1

我测试了您的代码，也使用了doctype，并使用了非HTML5元素（div）。我可以测试的所有webkit浏览器都存在问题：Safari-on-Windows 5，Chrome Windows，Chrome Linux，Epiphany-webkit。

然而，当我从显示状态更改为背景颜色时，webkit工作正常。更改浮动等其他显示状态也可以正常工作。

这很可能是一个错误（虽然我没有看到一个通过搜索引擎，但我没有搜索bugs.webkit.org）纯粹与改变显示状态有关。如果首先将元素设置为block并且：only-child设置为none，它也可以正常工作，因此它将特别覆盖display：none。打开元素检查器似乎会触发CSS显示，直到刷新为止。

您的代码（如果您也添加了doctype）似乎是一个非常好的测试用例。如果bugs.webkit.org上没有此错误，您可以提交此代码。

*编辑好吧我肯定有Javascript，仍然没有看到能够将此作为评论而非答案，这是我最初的意图。

Answer 2

我有同样的问题，我发现了这个解决方法：

http://jsfiddle.net/ZxAnH/

section {
    height: 0;
    overflow: none;
}
section:only-child {
    height: auto;
}

它不会隐藏元素边距，但作为包装器，它可能足以隐藏一些元素。你找到了另一种解决方法吗？

：只有孩子没有在Webkit / Safari中显示

2 个答案: