上面頂部div不需要的填充 - 僅在Firefox中

我正在玩this模板。當將功能合併到我正在構建的儀表板中時，一切工作正常，只是在縮小字體大小時，我在標籤上方得到了幾個像素的不需要的空白區域。我創建了一個最小的工作例如：上面頂部div不需要的填充 - 僅在Firefox中

HTML：

<div class="tab"> 
    <input type="radio" id="tab-1" name="tab-group-1" checked> 
    <label for="tab-1">Tab One</label> 
</div> 

<div class="tab"> 
    <input type="radio" id="tab-2" name="tab-group-1"> 
    <label for="tab-2">Tab Two</label> 
</div>

CSS：

* { 
    padding: 0; 
    margin: 0; 
} 

body { 
    background: #003399; 
} 

.tab { 
    float: left; 
} 

.tab label { 
    background: #eee; 
    position: relative; 
    font-size: 16px; 
} 

.tab [type=radio] { 
    display: none; 
}

https://jsfiddle.net/tqejgae0/

使用Firefox時，看到標籤上方的額外藍色空間？它看起來像Chromium，Chrome，Opera和Safari一樣。

有很多的＃2類似的問題，他們大多解決了

* { 
    padding: 0; 
    margin: 0; 
}

無論這個，也沒有任何其他解決方案爲我工作。

網頁設計當然不是我的背景，所以我很感謝任何幫助！

編輯：

以下是截圖：

來源

2016-03-03 Clang

不，標籤上面沒有多餘的空間，藍，對不起。 –

我可以在特定縮放級別（高於和低於100％）下最多出現1個藍色線條像素，但它不在100％。 –

添加顯示：塊到.TAB標籤選擇器解決了這個問題對我來說。

.tab label { 
    background: #eee; 
    position: relative; 
    font-size: 16px; 
    display: block; 
}

https://jsfiddle.net/tqejgae0/2/

截圖：

來源

2016-03-07 11:45:15 Clang

上面頂部div不需要的填充 - 僅在Firefox中

回答

相關問題