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

Question

我试图创建某种网格，我在角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;
}

我使用1 1px宽div作为垂直线，1 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/