按钮不透明度导致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）中看到文本略微模糊/移动到左侧。其他Windows浏览器似乎没有Opera，我可以看到相同的效果，但不是很明显。

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

我已将其添加为CodePen。

Answer 1

这是因为背面可见性的默认值是可见的。您可以隐藏它而不是它可见。添加此CSS样式并检查：

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

Answer 2

    .button:active {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -o-opacity: 0.8;
      -webkit-opacity: 0.8;
      -ms-opacity: 0.8;
    }