按钮不透明度导致 Chrome 中的像素 shift/blur

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) 左侧看到了轻微的 blurring/shifting 文本。其他 Windows 浏览器似乎不错，除了 Opera，我可以看到相同的效果，但不那么明显。

我还没有在 OS X Chrome.

上测试过这个

我已将其添加为 CodePen。

Answer 1

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

Answer 2

发生这种情况是因为背面可见性的默认值是可见的。您可以隐藏 it.Add 这个 CSS 样式并检查：

，而不是显示它

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

按钮不透明度导致 Chrome 中的像素 shift/blur

Button opacity causing pixel shift/blur in Chrome

html

css

google-chrome

button

opacity