Html 奇怪的CSS3按钮

我的CSS3按钮在某些用例中无法正确显示。在FF&Safari中，它们显示良好，但在镀铬中，左侧边框较厚，当您将鼠标悬停在它们上方时，填充颜色不会填充100%的区域。请参见一个工作示例：如何修复它

/* @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);

---

您可以尝试在

.btn:：before

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

---

将

上锚定元素的
溢出：隐藏
更改为
溢出：自动
<代码>溢出：隐藏
似乎增加了一些边距。请参阅此处的更多信息：


您的问题似乎是由
块
元素上的
文本对齐：居中
属性引起的

您可以通过替换以下内容来解决此问题：

.btn, .btn:visited, input.wpcf7-submit {
    display: inline-block;
}

with

.btn, .btn:visited, input.wpcf7-submit {
    display: inline-table;
}

这是一个演示


让我知道这是否会导致其他浏览器出现问题。首先，这显然是一个crhome错误

然而，右边框的问题可能很容易被“修复”（即使它没有被打破）添加到
:before
opacity:0
和
hover:：before
，
opacity:1

在我看来，黑色背景没有填满整个宽度的问题就像是与使用
transform:translateZ（0）相关的bug和
z索引：1
在同一类中。如果你同时移除这两个，它会修复它，但是你会失去一些效果。。。但也许你可以尝试另一种方法来做同样的事情。
这对我来说是一个非常奇怪的问题，但似乎就像大多数其他评论者所说的那样，这确实是一个Chrome问题。

我需要彻底消除这个问题，所以最终使用了
max width
来克服它，这确实有它自己的缺点。例如，如果按钮标签太长，那么它将出现在两行上，如果它太短，按钮将看起来太宽，但与我所经历的边界和悬停问题相比，它们是我更高兴的妥协。以下是供参考的工作小提琴：

让我们希望谷歌能给这个排序…
效果不错。但在这里没有看到Chrome的任何问题。你不会被放大吧？尝试按CTRL
+
0
以确保。外观良好。您使用的是哪个版本的chrome？chrome没有问题，但在Safari中，按钮并没有完全填满。我可以确认，这种奇怪的行为也发生在我的chrome中。没有放大，没有插件或插件。问题是所有的转换和奇数视口宽度的组合。当视口具有均匀宽度时，按钮将正确渲染。Chrome将元素捕捉到设备像素，并且不正确地舍入了某些内容。它如何在Chrome中为您造成问题？它不可能导致所描述的问题，它是完全相反的。在IE或Chrome中似乎不会给我造成问题，请不要说明。为此增加了补偿。我不知道它如何对我们中的一些人起作用，但对其他人不起作用，我们中的一些人根本看不到原始问题，有些人这样做了…这修复了左边框问题，但我仍然看到悬停问题，因为它仍然没有填满100%的按钮。这修复了Chrome，但破坏了Firefox。不透明度是一个好主意，但它不能解决整个问题。删除平移z和z索引也不能解决悬停问题，它所做的只是删除右侧边框（奇怪的是），但背景仍然没有填满100%的宽度。我看不到对答案的任何更改，除非我遗漏了什么？！很可能：-哈哈，对不起，我的浏览器卡住了！调查和更新很快。这消除了边界和悬停的两个问题，但是在FF（我假设IE）中，当您将鼠标悬停在按钮上时，滚动条现在会出现……所以非常接近，如果您将
overflow:auto
放置在
overflow-x:auto；溢出y：隐藏（在.btn类上）。试试看。在调整了浏览器的大小后，它似乎像其他评论所说的那样，是一个Chrome百分比问题。有些宽度有效，有些则不行。