如何在导航栏上删除非常薄的亮边和暗边

Question

我的一位客户注意到导航栏上的活动链接中有一条非常细的光线和一条非常细的暗线。它几乎没有引人注意，但它就在那里。我已经尝试过调整CSS，但由于线条的宽度不到一个像素，我不确定它是不是CSS。

以下是网址：http://www.abqlibraryfoundation.org

如果您查看导航栏中的“主页”链接，您会看到它是活动页面，它是生锈的橙色，左侧有一个薄的边缘。右侧在橙色和绿松石色之间有一条深色的薄边。

有谁知道造成这种情况的原因是什么？

Answer 1

这是因为子像素工件。

现在也建设性地使用它来平滑文本。这是因为屏幕由红色，绿色和蓝色子像素组成，以垂直方向设置。请注意，某些屏幕上的实际订单可能会有所不同。

rgb|rgb|rgb
---+---+---
rgb|rgb|rgb
---+---+---
rgb|rgb|rgb

这意味着您可以在导航栏中进行如下处理：

blue       |    red    |   blue
---+---+---+---+---+---+---+---
  b|  b|  b|r  |r  |r  |  b|  b
---+---+---+---+---+---+---+---
  b|  b|  b|r  |r  |r  |  b|  b
           ^           ^
           |           Artifact caused by sub-pixels being far away (darker line)
           |
           Artifact caused by vicinity of sub-pixels (lighter line)

我还创建了一个图像来说明液晶屏幕中的典型像素配置（rgb）：

你可以看到第一个过渡的方式，当蓝色变为橙色时，有一个绿色的子像素，后跟蓝色和红色的子像素，相对接近彼此。我们的眼睛认为这是白色。

在右边（从橙色到蓝色的第二个过渡），显示出一个间隙，给人一种暗色的幻觉。

关于移动设备的说明

由于移动设备上的大多数网页通常都是缩放，因此效果远不那么明显（由于图像重新采样）。另外需要考虑的一个方面是屏幕的方向可以改变，因此可能会在不同的方向上创建工件。

如果您对如何利用此效果来渲染平滑文本感兴趣，可以继续阅读维基百科上的以下文章：wikipedia

这就是现在的屏幕工作方式，你无能为力（不改变设计）

Answer 2

如果您看到白线，则表明您的显示器存在缺陷或视错觉。这是来自chrome的一个惊人的截图。正如您在扩展部分中可以清楚地看到的那样，没有更亮的像素列。

通过反复试验，我发现通过应用此样式，我可以消除显示器上的错觉。

.nav-bar>li#active>a{ border-left: rgb(146, 108, 66) 1px solid; }

它在左边缘创建一个1像素的深橙色，最终看起来像这样。如果你放大那个，它最终看起来比原来明显更糟。