OSX / IOS上的border-color适应颜色属性

Question

有人可以向我解释为什么在下面的例子中，边框颜色有时不是在css中声明的颜色。

网址：http://www.strasser-architektur.com.k1859.ims-firmen.de/de/werkliste/werkliste.html

在您看到的页面上，其中两个框中有一个链接。 现在，如果你从Windows PC上看它，border-color在我可以测试的每个浏览器上都显示正确。但是，如果我从我的iPhone访问该页面，边框颜色与文本color相同。我无法使用css覆盖它，当我使用css更改color的{​​{1}}时，<a>也会相应更改。 以下是我的iPhone 6使用Chrome的截图。

Answer 1

它似乎是边框的尺寸，如果你使用1像素的高度，渲染问题，这可能与视网膜显示有关。我可以通过一个非常简单的设置轻松地重现不良行为：

假设这样的HTML语法：

<div class="werkliste-inner">
    <p>Lorem ipsum</p>
    <p>Text text text</p>
</div>
<div class="werkliste-inner">
    <p>Lorem ipsum</p>
    <p>Text text text</p>
</div>

和相应的CSS：

body {
    background: #000;
    color: #fff;
}

.werkliste-inner {
    border-top: 1px solid lime;
} 

我使用iOS 8在iPhone 5 + iPhone 6上获得不同的颜色。您将找到测试here的小提琴。

我玩了各种各样的想法，但是一旦我使用1像素值，它就出错了（例如：一个高度为1px和background-color的元素，一个border-image，一个background-image）。最后，我提出了一个适合我的扩展解决方案：

.werkliste-inner-fix:before {
    display: block;
    content: '';
    background: #6e6e6e;
    height: 2px;
    transform: scaleY(0.5);
}

如您所见，我使用伪元素并缩放到＆＃34;修复＆＃34;不正确的高度。这是test fiddle。

这个概念并不新鲜，有several articles与视网膜显示和像素显示有关，但它确实是我第一次看到颜色渲染效果。

您应该知道这只是针对iOS设备的修复，因此您可以将其包装在媒体查询中，以避免在其他操作系统中出现不必要的交叉影响。

@media only screen and (-webkit-min-device-pixel-ratio: 2) {...}