边框元素中不需要的可见背景

Question

我需要红色的左方填充100%的高度的父元素(el。带红色边框)如下所示：

​

​

但在我的笔记本上(全高清，铬合金100%比例)，它看起来是这样的：

​

​

如果你能看到在红色方块的顶部和左侧有可见的黑色背景。(如果你的渲染类似于pic.1，你可以在浏览器中放大/缩小)

我怎样才能达到像图片1那样渲染？

下面是小提琴：

https://jsfiddle.net/dLnj6394/

HTML：

<div class="line">
  <div class="year">a
  </div>
</div>

<div class="line">
  <div class="year">a
  </div>
</div>

<div class="line">
  <div class="year">a
  </div>
</div>

CSS：

.line {
  border: 1px solid red;
  background-color: black;
  display: inline-block;
  width: 100%;
}

.year {
  float: left;
  background-color: red;
  width: 50px;
  height: 40px;
}

Answer 1

一个稍微有点老生常谈的解决办法是在左边给线条元素一个红色的条纹作为背景，这样当你得到分割像素的“舍入误差”时就不会显示黑色。

 background-image: linear-gradient(to right, red 0 50px, transparent 50px 100%);

Answer 2

​

.line {
  border: 1px solid red;
  background-color: black;
  display: block;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
}

.year {
  float: left;
  background-color: red;
  width: 50px;
  height: 40px;
}

<div class="line">
  <div class="year">a
  </div>
</div>

<div class="line">
  <div class="year">aa
  </div>
</div>

<div class="line">
  <div class="year">a
  </div>
</div>

​

现在可以了吗？你如何在浏览器中看到它？