Chrome渲染隐藏标签

Question

我已经创建了一个使用CSS的选项卡系统，它按照预期工作，除了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中，当点击标签时，另一个标签由于某种原因被隐藏，我无法弄清楚原因。

Answer 1

它隐藏在谷歌浏览器中的原因是，当你点击一个元素时，它会使它变得稍大一点，从而导致溢出，让你无法察觉。谷歌浏览器看下面的规则，并隐藏它：

.tagmanage-tabbed > div > section > h1 { 
    overflow: hidden; 
} 

当我删除这条线，它不被隐藏了。