html - 奇怪的 CSS3 按钮

Question

我的 CSS3 按钮在某些用例中显示不正确。在 FF 和 Safari 中，它们显示良好，但在 Chrome 中，左侧边框较粗，当您将鼠标悬停在它们上方时，填充颜色不会填充 100% 的区域。查看工作示例:http://jsfiddle.net/3x4zc8tq/3/我该如何解决？

/* @group Center all the things */

.center-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .center-wrapper .center {
        position: relative;
        overflow: hidden;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);


       /* This fixes the blurred buttons but breaks centering

       -webkit-backface-visibility: hidden;
               backface-visibility: hidden;

       transform: translateZ(0);*/
     }

/* @end */

以下经过试验和测试的方法对我不起作用:

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
transform: translateZ(0);

Answer 1

您可以尝试将此添加到 .btn::before 的 CSS 规则中

.btn::before {
    left:-1px;
    width:101%;
}

http://jsfiddle.net/3x4zc8tq/6/