CSS border-width：1px不会给我同样薄的边框

Question

我正在尝试为div添加细边框。我的CSS是这样的：

border: solid;
border-width: 1px;

然而，结果边框在我的浏览器中看起来并不那么薄。如下所示，左侧和底部的边框看起来比右侧和顶部的边框更粗。

我想让边框同样薄。我试图添加

shape-rendering: crispEdges;

但它并没有改变外观。 JS Fiddle example here.

我在Chrome版本41.0.2272.101中试过这个 - 看起来很糟糕。我也在IE中试过这个 - 它看起来很好。所以我知道这不是我的监视器...

Answer 1

您的显示器设置为非原生分辨率。 （Windows 8）右键单击桌面，单击“屏幕分辨率”，然后选择建议的分辨率。

Answer 2

我有同样的问题。 经过一些研究后我发现它是由1.5设备像素比率引起的（Windows 8.1设置比例为150％）。

解决方案是将销售额设置为100％，但它会使文本变得太熟，所以我无法使用此解决方案。

IE（11）和Chrome都受到影响。 Firefox还可以。

同样的问题适用于手机和平板电脑：

mobile safari rendering buttons with border

Uneven border in mobile browsers

Answer 3

您可能在框的左侧和下方有其他元素，并且可能会意外地将边框应用于它们，以使其看起来像是＆＃34; double＆＃34;边界。

确保隔离包装盒然后重试。

1px边框不会像显示的那样不均匀。