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

當我刪除這條線，它不被隱藏了。