以 vmin 为单位设置的边界会导致间隙

Question

描述

我有一个奇怪的错误，当使用vmin单位设置时，边框会导致内容和边框本身之间出现小间隙。

可重现的片段

调整窗口大小以查看它，因为它只发生在某些设备视口上

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  border-right: 1vmin solid red;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

<div class="container">
   <div class="content" />
</div>

前提

• 我正在用vmin单位设置边框以使其在任何屏幕分辨率之间保持一致
• 元素应保持当前结构（父级边框，子级背景）
• 两个元素都应该有 display: flex

问题

我怀疑问题在于如何将vmin值四舍五入为像素，从而创建在类似场景中可以看到的额外像素（其中有背景的孩子突出显示间隙）。

我的尝试

• 通过使用display: tables 而不是flex修复额外的 px，但这不能作为一个选项，因为需要 flex
• vw/vh或任何视口单元产生相同的问题

解决方案

• 一种具有柔性边界的解决方案可能是简单地设置.container:after一个width百分比，height100％和background-color代替border。这个解决方案工作得很好，但它不是一个可扩展的解决方案，以防我们需要的不仅仅是一个边界面（例如border-right）。

结论

因此，在这一切的前提下，是否有一些技巧可以直接应用于边框（或其元素）以绕过它？

我不关心找到第一个可行的解决方案；正如所介绍的，解决方案已经存在，所以这个问题只是出于对编写更好代码的好奇心。

Answer 1

尝试使用box-shadow。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  box-shadow: 1vmin 0 0 0 #f00;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

<div class="container">
   <div class="content" />
</div>

box-shadow: 1vmin 0 0 0 #f00;右边框，box-shadow: 0 0 0 1vmin #f00;全边框。

编辑：

为什么差距消失了？我认为这是因为 box-shadow 是一种带有一些偏移的背景。所以，十进制像素在最后。我猜。

但请记住，它的行为与@do?ukan在评论中所说的不同。

但 box-shadow 不像边框那样工作。看到不同。带边框：i.stack.imgur.com/gqgsD.png box-shadow: i.stack.imgur.com/2ZsrA.png 如果这不是问题，box-shadow 工作正常。