Chrome渲染隐藏标签
问题描述:
我已经创建了一个使用CSS的选项卡系统,它按照预期工作,除了Chrome中的一个标签被随机隐藏。Chrome渲染隐藏标签
我创建了一个小例子来表示这个问题:http://jsbin.com/xexupiciru/edit?html,css,output
这是代表一个标签相关的代码的摘录:
<div>
<input name="tagmanage-tabbed" id="tagmanage-tabbed2" type="radio">
<section>
<h1>
<label for="tagmanage-tabbed2">{{ tabTitle }}</label>
</h1>
<div>
<p>Some content</p>
</div>
</section>
</div>
在Safari和Firefox这工作按预期,但在Chrome中,当点击标签时,另一个标签由于某种原因被隐藏,我无法弄清楚原因。
答
它隐藏在谷歌浏览器中的原因是,当你点击一个元素时,它会使它变得稍大一点,从而导致溢出,让你无法察觉。谷歌浏览器看下面的规则,并隐藏它:
.tagmanage-tabbed > div > section > h1 {
overflow: hidden;
}
当我删除这条线,它不被隐藏了。
你的jsbin例子在谷歌浏览器(手机) –