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

html5 • • 问答

描述

我有一个奇怪的错误，当使用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>
   <div />
</div>
<div>
   <div />
</div>

回答

尝试使用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;
}

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 工作正常。

  • but box-shadow doesn't work like border. see the difference. with border: https://i.stack.imgur.com/gqgsD.png box-shadow: https://i.stack.imgur.com/2ZsrA.png if this is not a problem, box-shadow works fine.

以上是以vmin为单位设置的边界会导致间隙的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容