缩放浏览器窗口时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选项卡看起来不好

回答

相关问题