Question

我有这样的设置： https://codepen.io/anon/pen/JrrVrV

在Chrome上以各种显示分辨率或缩放比例（ctrl + / ctrl-），
在#two的边框与#three之间显示1px空格，显示#two的红色背景 1px空间将出现在所有4个边，顶部+底部或左侧+右侧。

我已经玩了好几个小时了，现在唯一能完全消除这种行为的就是删除box-sizing: border-box，不幸的是会破坏很多东西。

认为这是一个仅限Chrome的问题，因为我还没有能够在Firefox或Opera中复制它。

知道导致它的原因吗？

Answer 1

尝试在#two中添加font-size：0，这样就可以了：

＆＃13;

* {
  box-sizing: border-box;
  background-clip: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-flow: row nowrap;
  font-size: inherit;
}

div {
  display: flex;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-size: 1.11em;
}

#one {
  height: 100%;
  width: 100%;
  background: rgba(9, 36, 48, 1);
}

#two {
  height: 92%;
  width: 92%;
  background-color: red;
  border-width: 0.13em;
  border-style: solid;
  font-size:0;
  border-color: rgba(9, 156, 99, 1);
}

#three {
  height: 100%;
  width: 100%;
  background-color: blue;
}

＆＃13;

<div id="one">
  <div id="two">
    <div id="three"></div>
  </div>
</div>

＆＃13;

要保持边框显示您可以使用font-size值（例如使用font-size：0.7em）

另一个解决方案：你也可以改变身体的字体大小，而男性则改为1em而不是1.11em

奇怪的1px空间随机出现在Chrome中

1 个答案: