CSS 当子元素具有背景颜色且浏览器缩小小于 100% 时边框消失

Question

我有一个带有 1px 边框的元素和一个带有背景颜色的子元素，当我将浏览器的缩放比例缩小到 70-80% 时，导致父元素的边框消失。

我注意到它发生在 PC 的 Chrome 和 IE11 中，但在我的 MacBook Pro 上的 Chrome 中没有。

问题截图如下：

示例代码如下： https://codepen.io/richfinelli/full/yvpRxW/

<section class="card__container">
  <header class="card__header">
    <h1>Title</h1>
  </header>
  <div class="card__value">850</div>
  <footer class="card__footer">Lorem ipsum dolor sit amet.</footer>
</section>

css/scss:

.card__container {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 10px auto;
  align-items: stretch;
  font-family: "source code pro";
  color: darken(#cccccc, 60%);
}
.card__header {
  background-color: lighten(hotpink, 10%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  h1 {
    font-size: 2rem;
  }
}
.card__value {
  align-self: center;
  padding: 50px 0;
  color: hotpink;
  font-size: 2rem;
}
.card__footer {
  padding: 10px;
  font-family: Arial;
  font-style: italic;
  font-size: .8rem;
  background-color: lighten(blue, 45%);
}

想弄清楚为什么我的边框消失了？

Answer 1

我了解到这可能正在发生："You are forcing Chrome to do subpixel calculus, and this usually has strange behaviours." 来自此处类似但略有不同的问题：Borders disappear in Chrome when I zoom in

经过多次试验、错误和研究后，我的解决方法是为具有背景颜色的子元素添加 1px 边距（如果您愿意，也可以是缓冲区）。这是一个轻微的权衡，因为边框和背景之间有 1px 的差距，但这是一个我很满意的权衡。

Codepen 修复： https://codepen.io/richfinelli/pen/PQxbed?editors=1100

.card__container {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 10px auto;
  align-items: stretch;
  font-family: "source code pro";
  color: darken(#cccccc, 60%);
}
.card__header {
  background-color: lighten(hotpink, 10%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1px; //added this
  h1 {
    font-size: 2rem;
  }
}
.card__value {
  align-self: center;
  padding: 50px 0;
  color: hotpink;
  font-size: 2rem;
}
.card__footer {
  padding: 10px;
  font-family: Arial;
  font-style: italic;
  font-size: .8rem;
  background-color: lighten(blue, 45%);
  margin: 1px; //and added this
}

我相信 1px 的边距或缓冲区就足够了，不会强制浏览器执行 "subpixel calculus"，因此当浏览器缩小时不会删除某些边上的边框。

Answer 2

对我来说，这听起来像是由于浏览器的亚像素微积分而导致的数字舍入问题。但是，如果您调整不同的缩放级别和视口宽度，我确实在 Chrome/Mac 上看到了问题，您可以通过不同的方式看到问题：

Chrome/Mac 125% 缩放/1196 像素视口页眉和页脚背景与左边框之间的差距：

Chrome/Mac 90% 缩放/1181 像素视口页眉和页脚背景与右边框重叠：

一个 non-design 影响修复是使用 pseudo-element:

中的定位创建边框

.card__container {
    position: relative; // ADDED 
    // border: 1px solid black; // REMOVED
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: 10px auto;
    align-items: stretch;
    font-family: "source code pro";
    color: darken(#cccccc, 60%);

    // ADDED
    &::after {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         border: 1px solid #000;
    }
}

Codepen：https://codepen.io/danbrady/pen/QQYyzM（在 IE11、Chrome（Mac 和 Win7）、Firefox 和 Safari 中测试。

虽然这是更多的代码，而且不可否认，有点古怪，但它并没有改变最初的设计意图。此外，您可以考虑将其抽象为混合或单独的实用程序 class.

(P.S。从你的 blog post 来到这里。你激励我不要潜伏（至少今天）。:^)

CSS 当子元素具有背景颜色且浏览器缩小小于 100% 时边框消失

CSS border disappears when child element has a background color AND browser is zoomed out less than 100%

html

css

background

border

zooming