ブラウザウィンドウをズームするとCSSタブが悪く見える

下の境界線を持つCSS「タブバー」があります。アクティブなタブには、下の境界線に「穴」があります。私は負のボトムマージンとボトムボーダーをバックグラウンドと同じ色で実装しました。ブラウザウィンドウをズームするとCSSタブが悪く見える

これは、通常のブラウザズームで正常に見える：

をしかし、私は、ブラウザのウィンドウをズームする場合はChromeとSafariでさまざまな方法で悪いなります

私はどのように

ズーム時に見えないようにしますか？理想的には、追加のマークアップを導入しないでください。私はそれが少なくとも現代のすべてのブラウザで動作するようにしたいと思います。（：https://jsfiddle.net/4utwsvt2/ JSFiddle）：ここで

コードです

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％の間で良好に見えません。 –

border-bottomを2pxにする：D – Keloo

これはMacOS Sierra 10.12.5（16F73）のChrome 59.0.3071.115とSafari 10.1.1（12603.2.4）です。あなたは 'translate'について正しいです - 私は質問を編集します。ありがとうございました！ –

私は、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タブが悪く見える

答えて

関連する問題