html - 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

它在谷歌浏览器中被隐藏的原因是，当你点击一个元素时，它会使它稍微变大，从而导致溢出，你无法察觉。 Google Chrome 查看以下规则并将其隐藏:

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

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