Question

enter image description here http://jsfiddle.net/36ykrp9x/5/

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，并且尚未看到元素之间的细线，请尝试稍微调整窗口大小。按钮之间的细线将闪烁进出。

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

不幸的是，将按钮组置于固定宽度元素中并不能解决这个问题，因为固定宽度按钮组必须最终也以某种方式居中，似乎复活了问题。利用边缘推动可能会导致重叠，这对于具有这种不透明度的元素更为明显 - 这实际上并不比首先存在差距更好。

值得注意的是，确实使用背景颜色：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像素空间。试试这个：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>

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

2 个答案: