Question

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

如果你看一下我的例子，我想每行两个子元素。这意味着当组合它们的宽度和边距时，两个子元素将填充父元素的整个宽度。

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之前和之后使用伪元素，父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/

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

Chrome调整大小会使某些缩放级别的子元素过大

1 个答案: