html - 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/