缩放浏览器窗口时，CSS选项卡看起来很糟糕

Question

我有一个CSS＆＃34;标签栏＆＃34;带有底部边框。活动标签应该有一个＆＃34;孔＆＃34;在底部边界。我通过负底边距和底边框实现了与背景颜色相同的颜色。

这在普通的浏览器缩放下看起来很好：

但如果我缩放浏览器窗口，Chrome和Safari会以各种方式看起来很糟糕：

缩放时如何让它看起来不坏？理想情况下，不会引入额外的标记。我希望它至少可以在所有现代浏览器中使用。

这里是代码（JSFiddle：https://jsfiddle.net/4utwsvt2/）：

HTML：

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

CSS：

position: relative

我尝试了小数点像素值as suggested here但没有运气（JSFiddle：https://jsfiddle.net/1gyz7me5/1/）。

我尝试使用translate而不是负边距，没有运气（在Chrome浏览器中看起来不错但在Safari中看起来不错 - JSFiddle：https://jsfiddle.net/qwkvxdj4/）。

我尝试使用didTapFacebookLoginButton代替负边距，没有运气（JSFiddle：https://jsfiddle.net/qwkvxdj4/1/）。

Answer 1

我找到了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;
}

问题是“隐藏”带有标签底部边框的底部边框以显示活动状态。在某些缩放级别，美学将仅部分覆盖（如果有的话）底部边界。通过删除负边距并使位置相对，您在页面渲染后移动选项卡，这是一个适当的伪修复，至少可以放大。