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

我正在尝试创建某种网格，我在Angular 2应用程序中自动生成，它如下所示：

我使用1px宽div作为垂直线，1px高div作为水平线。不幸的是，它们似乎有不同的厚度（如果JSFIDLE没有揭示问题，可能只是在firefox中发生的）。以下是我如何看待它的截图：

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

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

致以最良好的祝愿，

---

Daniel

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

而不是使用：

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

您可以使用：

border-bottom:1px solid #3c8dbc;

---

截图上的线条似乎重叠。尽管当我打开JSFIDLE时，一切看起来都很完美，没有重叠的线条。我正在使用Chrome Atm，fiddle在firefox中看起来还不错。我还建议您使用

。希望这有帮助！小提琴在这里看起来很好——所有的线条都一样粗。我想您所描述的可能与舍入有关（如果线之间的距离不是以px为单位测量的，而是以em为单位，必须在屏幕上舍入到px），还有浏览器中操作系统的抗锯齿。事实上……这正是

的目的。我支持你的意思是，如果浏览器的缩放设置不是100%，那是正确的！你知道我能做些什么来防止这种情况发生吗？不，你不能禁用浏览器缩放（请参阅）

border-bottom:1px solid #3c8dbc;