CSS边框宽度设置为1像素无法获得相等宽度的边框。

Question

5

我正在尝试为一个

添加细边框。我的CSS如下：

border: solid;
border-width: 1px;

然而在我的浏览器中，边框的粗细并不均匀。如下图所示，左侧和底部的边框看起来比右侧和顶部的边框更厚。

enter image description here

我想让边框的粗细均匀。我尝试添加了

shape-rendering: crispEdges;

我在Chrome版本41.0.2272.101 m中尝试了这个方法-它看起来很糟糕。我也在IE中尝试过-它看起来很好。所以我知道这不是我的显示器的问题...

- CherryQu

1

在Chrome 41中看起来很好，没有发现任何问题。 - Hashem Qolami

这不是 shape-rendering 的使用方式（它没有任何效果）。你在哪个浏览器中查看？我找不到能复制你的问题的浏览器。 - Adam Jenkins

尝试更新你的Chrome浏览器，对我来说看起来很好。 - Steph

在Chrome中看起来不错：http://screencast.com/t/bpqcQbmr - Sammy

我使用的是Chrome 41.0.2272.101 m（最新版本），但仍然存在这个问题。在我的IE浏览器中，一切看起来都很好，所以我知道这不是我的显示器的问题，而是Chrome的问题... @HashemQolami - CherryQu

至少现在你知道它在我们其他人看来看起来很好了 :-) - Hashem Qolami

3个回答

2

我有同样的问题。通过一些研究，我发现它是由于1.5设备像素比(Windows 8.1将所有内容都放大到150%)造成的。

解决方法是将比例设置为100%，但这会使文本变得超小，所以我不能使用此解决方案。

IE(11)和Chrome都受到影响。Firefox没有问题。

- Marek Babak

-2

你很可能在盒子的左侧和下方有其他元素，并且可能会意外地将边框应用于它们，使其看起来像是具有“双重”边框。

确保隔离该盒子并重试。

像你展示的那样，1px的边框不能不均匀。

- xengravity

2

即使是完全垂直的1像素线，在屏幕上也可能因子像素定位、页面缩放、非本地分辨率、操作系统缩放甚至极端情况下的非矩形子像素而不均匀。这不是一个新现象，自从我们有了子像素HTML渲染以来，就一直存在这个问题。 - Sheepy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Jenkins · Accepted Answer

您的显示器分辨率设置为非原生分辨率。(Windows 8) 右键单击桌面，点击“屏幕分辨率”，然后选择推荐分辨率。