CSS - 水平/垂直线具有不同的厚度

Question

我试图创建某种格式，我会自动在Angular 2应用程序中生成它看起来像这样：

https://jsfiddle.net/Arcanst/ayv31363/3/

.vertical-line {
  position: absolute;
  width: 1px;
  background-color: #3c8dbc;
}

.horizontal-line {
  position: absolute;
  height: 1px;
  background-color: #3c8dbc;
}

我使用1px宽的div作为垂直线，1px的高div作为水平线。不幸的是，他们似乎有不同的厚度（如果jsfiddle没有透露问题，也许它只是在firefox中发生）。以下是我如何看待它的屏幕截图：

正如您所看到的，周二和周三之间的垂直线比周三和周四之间的垂直线要粗，尽管它们具有相同的css类，而firefox工具显示它们实际上是相同的宽度。在水平线上可以看到同样的问题。

如何防止这种情况发生？我应该对垂直/水平线使用不同的方法吗？

祝你好运， 丹尼尔

Answer 1

如果您增加了浏览器的缩放比例，则可能会出现此问题。如果您在Windows上按ctrl + 0或在Mac上按cmd + 0，您将看到线条正确显示。

而不是使用：

height: 1px;
background-color: #3c8dbc;

您可以使用：

border-bottom:1px solid #3c8dbc;

https://jsfiddle.net/ayv31363/4/