縮放瀏覽器窗口時CSS選項卡看起來不好

我有一個帶有底部邊框的CSS「選項卡欄」。活動標籤在底部邊框應該有一個「洞」。我已經通過負底部邊距和底部邊框實現了與背景相同的顏色。縮放瀏覽器窗口時CSS選項卡看起來不好

這看起來正常瀏覽器縮放罰款：

但在Chrome和Safari各種方式很糟糕，如果我放大瀏覽器窗口：

我如何變焦時不會看起來不好？理想情況下，不引入額外的標記。我希望它至少可以在所有現代瀏覽器中運行。

下面的代碼（的jsfiddle：https://jsfiddle.net/4utwsvt2/）：

HTML：

<body> 
    <div class="tabs"> 
    <div class="tab active">Foo</div> 
    <div class="tab">Bar</div> 
    </div> 
</body>

CSS：

body { background: #fff; } 

.tabs { 
    border-bottom: 1px solid #000; 
} 

.tab { 
    display: inline-block; 
    border: 1px solid #000; 
    margin: 0 5px -1px; 
    padding: 5px; 
} 

.tab.active { 
    border-bottom-color: #fff; 
}

我試過小數像素，沒有運氣值as suggested here（的jsfiddle：https://jsfiddle.net/1gyz7me5/1/ ）。

我試過使用position: relative代替負餘量，沒有運氣（在Chrome中看起來不錯，但不是Safari - JSFiddle：https://jsfiddle.net/qwkvxdj4/）。

我試過使用translate而不是負邊距，沒有運氣（JSFiddle：https://jsfiddle.net/qwkvxdj4/1/）。

來源

2017-08-07 Henrik N

當您說Safari時，是指Windows，Mac OSx還是iOS上的Safari？請注意，Windows版本有幾個版本，不再支持。另外，使用'translate'在Chrome中看起來不太好，從125-175％。 –

使邊框底部2px：D – Keloo

這是macOS Sierra 10.12.5（16F73）上的Chrome 59.0.3071.115和Safari 10.1.1（12603.2.4）。你說'翻譯'是對的 - 我會編輯這個問題。謝謝！ –

我發現Chrome的縮放級別的解決方案，除了75％和33％和20％：

body { background: #fff; } 

.tabs { 
    border-bottom: 1px solid #000; 
} 

.tab { 
    display: inline-block; 
    position: relative; 
    top: 1px; 
    border: 1px solid #000; 
    margin: 0 5px; 
    padding: 5px; 
} 

.tab.active { 
    border-bottom-color: #fff; 
}

問題是「藏」與標籤的底部邊框底部邊框顯得活躍。在某些縮放級別下，美學只會部分覆蓋（如果有的話）底部邊框。通過消除負邊距並使相對位置相對，您將在頁面渲染後移動標籤，這對於放大至少是一個體面的僞定位。

來源

2017-08-07 15:57:45

謝謝。恐怕我在https://jsfiddle.net/qwkvxdj4/（從問題鏈接）中嘗試了這一點，並指出它不能解決Safari中的問題。（既不是'top：1px'也不''bottom：-1px'。） –

縮放瀏覽器窗口時CSS選項卡看起來不好

回答

相關問題