html - 如何告诉浏览器以更多像素呈现百分比？

Question

我有一个高度为的盒子0.1em和一个字体大小为的容器14px。当我用百分比将我的盒子放在容器内时top，有时盒子的计算高度会根据百分比位置而变大。

rem我想通过简单地更改容器的字体大小来使我的元素做出响应（由于某些原因我不能使用）。例如。容器开始于10pxthen go 12px, 14px, 等等。

有没有办法告诉浏览器总是用更多像素（或更少像素）渲染我的盒子的高度，这样无论顶部位置如何，它看起来总是一样的？

我必须重现它的 SCSS（请参阅代码笔以使其正常工作）：

.container {
  font-size: 14px;
  padding: 2em;

  .background {
    width: 2em;
    height: 10em;
    background: lightblue;
    position: relative;

    .line {
      height: 0.1em;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: black;
    }
  }
}

我遇到的问题演示：https ://codepen.io/jared-hexagon/pen/KKKvxKQ

在最新的 MacBook 视网膜显示器和低 dpi 显示器的 Chrome OSX 中进行了测试 - 两者都有问题。

标签： htmlcss