CSS样式可见性的行为不如预期 [英] CSS Style Visibility not behaving as expected
问题描述
我有一个带有基本标签控件的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（）>隐藏标签< / a>< br /
< a href =javascript：showTab（）>显示标签< / a>< br /
< a href =javascript：hideContent（）>隐藏内容< / a>< br /
< a href =javascript：showContent（）>显示内容< / a>< br />< br /
< div id =tab1style =background：yellow; width：100px>
< div id ='tc1'>内容文字< / div>
< / div>
< / body>
< / html>
在IE8中点击隐藏标签，然后点击显示标签显示选项卡点击隐藏内容，然后显示内容这也是正确的。
在IE8中，当我使用兼容模式时，问题消失了。此外，我注意到，如果我删除DOCTYPE元素，我不能复制的问题。
在Chrome（我个人最喜欢的）问题是持久的，无论DOCTYPE元件。我没有在firefox中试过这个。
我确定这个行为有一个很好的理由，我也肯定会有一个简单的解决方案让我使标签正常工作。我期待您的意见。
这是因为CSS属性visibility是继承的，但不会影响页面的布局。因此，如果你设置一个元素被隐藏，其所有的子元素将是，除非你显式地使它们可见（通过指定 visibility：visible ）。 p>
您必须重置要继承的CSS属性才能获得所需的行为。您可以使用 inherit 关键字作为值： visibility：inherit
EDIT 或以JavaScript：
element.style.visiblity = '继承';
I have a html page with a basic tab control. I use javascript to show and hide tabs and tab content divs. My problem is that if I change the visibility of an element inside one of the tab content divs to 'hidden', then back to 'visible', the element seems to forget or lose its parent div container and remains visible, regardless of its original parents visibility.
To illustrate, take the following example:
<!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>
In IE8 click 'Hide Tab' then 'Show Tab' this works ok. With the tab shown click 'Hide Content' then 'Show Content' This is also correct. Now click 'Hide Tab' again and you should see the tab disappear but the content incorrectly remains.
In IE8, the problem disappears when I use compatibility mode. Also, I have noticed that if I remove DOCTYPE element, I can't replicate the problem.
In Chrome (my personal favourite) the problem is persistent regardless of the DOCTYPE element. I haven't tried this in firefox.
I'm sure there is a very good reason for this behaviour, I'm also sure that there will be a simple solution for me to make my tabs work correctly. I look forward to your comments.
This is because the CSS property 'visibility' is inherited, but does not affect the layout of the page. Therefore, if you set an element to be hidden, all its children will be, unless you explicitly make them visible (which is the case by specifying visibility: visible).
You must reset the CSS property to be inherited to get the behavior you want. You can do so by using the inherit keyword as the value: visibility: inherit
EDIT Or, as Javascript:
element.style.visiblity = 'inherit';
这篇关于CSS样式可见性的行为不如预期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
