当子元素具有背景色并且浏览器缩小不到100％时，CSS边框消失 [英] CSS border disappears when child element has a background color AND browser is zoomed out less than 100%

问题描述

我有一个边框为1px的元素，其子元素具有背景色，当我将浏览器的缩放比例缩小到70-80％时，导致父元素的边框消失了.

I have an element with a 1px border and a child element that has a background color causing the parent element's border to disappear when I zoom out my browser's zoom to 70-80%.

我注意到它发生在PC上的Chrome和IE11中，而不是在MacBook Pro上的Chrome中.

I've noticed it happens in Chrome and IE11 on a PC but not in Chrome on my MacBook Pro.

以下是问题的屏幕截图:

Here's a screenshot of the problem:

下面是示例代码: 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%);
}

试图弄清楚为什么我的边界消失了?

Trying to figure out why my border is disappearing?

推荐答案

由于浏览器的亚像素演算，这听起来也像是数字舍入问题.但是，如果您调整了不同的缩放级别和视口宽度，我确实会在Chrome/Mac上看到该问题，您可以通过不同的方式看到该问题:

It sounds like number rounding issues due to the browser's subpixel calculus to me, too. However, I do see the issue on Chrome/Mac if you adjust different zoom levels and viewport widths you can see the issue manifest in different ways:

Chrome/Mac 125％缩放/1196px视口 页眉和页脚背景与左边框之间的差距:

Chrome/Mac 125% Zoom / 1196px viewport Gap between header and footer backgrounds and left border:

Chrome/Mac 90％缩放/1181px视口 页眉和页脚背景与右边框重叠:

Chrome/Mac 90% Zoom / 1181px viewport Header and footer backgrounds overlap right border:

一个对设计无影响的解决方案是使用伪元素中的定位来创建边框:

A non-design impacting fix is to create the border using positioning in a 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中运行.

Codepen: https://codepen.io/danbrady/pen/QQYyzM (Tested in IE11, Chrome (Mac & Win7), Firefox, and Safari.

尽管这是更多的代码，并且虽然有点古怪，但它并没有改变原始的设计意图.另外，您可以考虑将其抽象为mixin或单独的实用程序类.

Although this is more code and, admittedly, a little quirky, it doesn't change the original design intent. Also, you might consider abstracting it into a mixin or separate utility class.

(PS从您的博客文章中出现.您已经启发了我不要潜伏(至少在今天是这样).:^)

(P.S. Came here from your blog post. You've inspired me to not lurk (at least for today). :^)

这篇关于当子元素具有背景色并且浏览器缩小不到100％时，CSS边框消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！