如何删除视网膜显示器上这些元素之间的单个像素 space？

Question

HTML

<div class="container">
     <button>O</button><button>O</button>
</div>

CSS

.container {
    width: 100%;
    background-color: rgb(120, 200, 200);
    text-align: center;
}
button {
    border: 0;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    background-color: gray;
}

上面的代码最能捕捉到我有兴趣解决的视觉错误。我应该注意到，这似乎不会影响 Firefox 或 Safari 的最新版本。我目前使用的是 Chrome 39。如果您使用的是视网膜显示器和 Chrome 的最新版本并且还没有看到元素之间的细线，请尝试稍微调整 window 的大小.按钮之间的细线会闪烁。

出于我的目的，层次结构中按钮组上方至少有一个元素具有 100% 的宽度，并且按钮必须在其中水平居中。按钮本身的不透明度必须介于 0 和 1 之间。它们可以是 div，或与此相关的任何其他元素 - 但我确实尝试过其他元素并发现问题仍然存在。

不幸的是，在 fixed-width 元素中将按钮组居中似乎无法解决我的问题，因为 fixed-width 按钮组最终必须 also 以某种方式居中，这似乎使问题复活。微调边距会导致重叠，这对于具有这种不透明度的元素来说更为明显 - 这实际上并不比首先有间隙更好。

值得注意的是，确实使用 background-color: rgba(r,g,b,a) 解决了大多数意图和目的的问题，但我很想在没有它的情况下解决这个问题，如果只是为了看到这是可能的。

我对涉及 JavaScript 的解决方案不是特别感兴趣。我运气不好吗？

Answer 1

根据您提供的信息以及我自己使用 Google Chrome 的经验，我认为这是 Chrome 中的一个浏览器错误，考虑到它仅出现在 Retina 屏幕上的 Chrome 中，其他浏览器（如 Safari 和 Firefox）不会出现该问题。您的 HTML 和 CSS 看起来很完美，所以我看不出这里有问题。

您还可以通过在最新版本的 Opera（在您的 Retina 显示屏上）中进行检查来验证这是浏览器渲染问题，因为 Opera 现在使用与 Chrome 相同的 Blink 渲染引擎（这是从 Webkit 分叉）。如果 Opera 表现出同样的问题，那么它是一个引擎问题，应该记录为一个错误。

除非其他人找到解决方法，否则我通常倾向于尽可能单独留下浏览器呈现错误，这样您就不会在您的网站中破解代码，并且当错误被修复时，您不会不必对您的网站做任何事情。

Answer 2

问题出在 jsfiddle.net。我在视网膜上的 Chrome 40 中有相同的 1 个像素 space。试试这个：http://dabblet.com/gist/c0068a79fc0268482ee1 或以下代码，直接加载：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
    width: 100%;
    background-color: rgb(120, 200, 200);
    text-align: center;
}
button {
    border: 0;
    width: 3rem;
    height: 3rem;
    opacity: 0.8;
    background-color: gray;
}    
</style>
</head>

<body>
  <div class="container">
     <button>O</button><button>O</button>
  </div>    
</body>
</html>

如何删除视网膜显示器上这些元素之间的单个像素 space？

How can I remove the single pixel space between these elements on retina displays?

html

css

retina-display

retina