html - 按钮不透明度导致 Chrome 中的像素偏移/模糊

Question

我有一个简单的按钮:

<a class="button" href="#">Click Me</a>

使用以下 CSS:

.button {
  color: #FFF;
  background: #0095CD;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-family: verdana;
  padding: 0.6em 0.8em;
}

.button:active {
  opacity: 0.8;
}

单击该按钮后，我发现 Windows 8 Chrome (40.0.2214.111 m) 中的文本向左轻微模糊/移动。除了 Opera 之外，其他 Windows 浏览器似乎还不错，我可以看到相同的效果，但没有那么明显。

我还没有在 OS X Chrome 上测试过这个。

我已将其添加为 CodePen .

Answer 1

发生这种情况是因为背面可见性的默认值是可见的。您可以隐藏它而不是显示它。添加此 CSS 样式并检查:

body{ -webkit-backface-visibility: hidden;}