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;
}

当我删除此行时，它不再被隐藏。