CSS 样式可见性未按预期运行答案

【问题标题】：CSS Style Visibility not behaving as expectedCSS 样式可见性未按预期运行
【发布时间】：2011-01-07 22:27:09
【问题描述】：

我有一个带有基本选项卡控件的 html 页面。我使用 javascript 来显示和隐藏选项卡和选项卡内容 div。我的问题是，如果我将其中一个选项卡内容 div 中的元素的可见性更改为“隐藏”，然后返回“可见”，则该元素似乎忘记或丢失其父 div 容器并保持可见，无论其原始父母的知名度。

为了说明，举个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"> 
    function hideTab(){
        document.getElementById('tab1').style.visibility = 'hidden'
    }
    function showTab(){
        document.getElementById('tab1').style.visibility = 'visible'
    }
    function hideContent(){
        document.getElementById('tc1').style.visibility = 'hidden'
    }
    function showContent(){
        document.getElementById('tc1').style.visibility = 'visible'
    }
</script>
</head>
<body>
    <a href="javascript: hideTab()">Hide Tab</a><br />
    <a href="javascript: showTab()">Show Tab</a><br />
    <a href="javascript: hideContent()">Hide Content</a><br />
    <a href="javascript: showContent()">Show Content</a><br /><br />
    <div id="tab1" style="background:yellow;width:100px">
        <div id='tc1'>Content Text</div>
    </div>
</body>
</html>

在 IE8 中单击“隐藏选项卡”，然后单击“显示选项卡”，这可以正常工作。使用显示的选项卡单击“隐藏内容”然后“显示内容”这也是正确的。现在再次单击“隐藏选项卡”，您应该会看到选项卡消失但内容不正确。

在 IE8 中，当我使用兼容模式时问题消失了。另外，我注意到如果我删除 DOCTYPE 元素，我将无法复制问题。

在 Chrome（我个人最喜欢的）中，无论 DOCTYPE 元素如何，问题都会持续存在。我没有在 Firefox 中尝试过。

我确信这种行为是有充分理由的，我也确信会有一个简单的解决方案让我的标签正常工作。我期待着你们的cmets。

【问题讨论】：

标签： javascript css dom visibility

【解决方案1】：

不要将子元素的可见性设置为“可见”，而是将其设置为“继承”——然后它将遵循其父元素的可见性设置，而不是独立地覆盖它。

【讨论】：

【解决方案2】：

这是因为继承了 CSS 属性“可见性”，但不影响页面的布局。因此，如果您将一个元素设置为隐藏，那么它的所有子元素都将隐藏，除非您明确地使它们可见（通过指定 visibility: visible 就是这种情况）。

您必须重置要继承的 CSS 属性才能获得所需的行为。您可以通过使用 inherit 关键字作为值来做到这一点：visibility: inherit

编辑或者，作为 Javascript：

element.style.visiblity = 'inherit';

【讨论】：

【解决方案3】：

我假设您的示例已简化，并且在您的实际代码中您有多个选项卡。在那种情况下，我很惊讶发布的答案对你有用。当您返回 tab1 时，您不想保留 tc1 的可见性吗？如果你这样做了，那么坚持你原来的想法，但修改选项卡功能，如下所示：

function hideTab(){
    document.getElementById('tab1').style.display = 'none'
}
function showTab(){
    document.getElementById('tab1').style.display = 'block'
}

请注意，我正在修改父 div 上的显示属性——而不是可见性属性。

【讨论】：