css - Chrome 调整大小使子元素在某些缩放级别上太大

Question

当您在 Google Chrome 中放大时，某些缩放级别会导致子元素大于父元素。有办法解决这个问题吗？

如果您查看我的示例，我希望每行有两个子元素。这意味着当合并它们的宽度和边距时，两个子元素将填满父元素的整个宽度。

https://jsfiddle.net/4tpLjL7u/

CSS

.parent {
  background: black;
  height: 404px;
  width: 404px;
  margin: 10px;
  border: 4px solid black;
  border-radius: 50%;
  overflow: hidden;
}

.child {
  height: 200px;
  width: 200px;
  display: inline-block;
}

.one {
  background: blue;
}

.two {
  background: green;
}

HTML

<div class="parent">
  <div class="child one"></div>
  <div class="child two"></div>
  <div class="child two second"></div>
  <div class="child one second"></div>
</div>

但是，当缩小时，有时每行只有一个子元素的空间。

我没有在 IE/Edge 中观察到这个问题。

谢谢。

Answer 1

Chrome 中似乎有一个已知错误会导致此类行为。放大和缩小可能会导致小的视觉故障。我四处寻找适合您的修复方法，但没有找到确定的方法。这是更改代码以获得所需结果的一种方法:

将父元素的字体大小设置为0。

.parent {
  font-size: 0;
}

这将删除子 div 之间的边框。当您现在缩放时，所有 div 都将正确呈现，但是您不再有分隔子 div 的边框...

要解决此问题，您可以在父 div 前后使用伪元素，它们将位于边框所在的位置。

.parent {
  position: relative; /* add this */
}

.parent:before {
  content: "";
  background-color: black;
  height: 4px;
  width: 404px;
  position: absolute;
  top: 200px;
  left: 0px;
  display: block;
}

.parent:after {
  content: "";
  background-color: black;
  height: 404px;
  width: 4px;
  position: absolute;
  top: 0;
  left: 200px;
  display: block;
}

您可以在此处查看演示:https://jsfiddle.net/cfuhcsrt/

我意识到要修复这么小的故障需要很多，而且根据您的需要可能不切实际，希望有更好的解决方案。