奇怪的 CSS3 按钮答案

【问题标题】：Strange CSS3 Button奇怪的 CSS3 按钮
【发布时间】：2015-05-22 11:57:56
【问题描述】：

我的 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);

【问题讨论】：

效果不错。虽然在这里没有看到 Chrome 的任何问题。你没有任何机会放大，是吗？尝试按CTRL + 0 进行确认。
看起来不错。您使用的是哪个版本的 chrome？
在 Chrome 中没问题，但在 Safari 中，按钮并没有完全填满。
我可以确认我的 Chrome 中也发生了这种奇怪的行为。没有放大，没有插件或插件。
问题是所有翻译和奇数视口宽度的组合。当视口具有均匀宽度时，按钮会正确呈现。 Chrome 将元素捕捉到设备像素，并且舍入不正确。

标签： html css

【解决方案1】：

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

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

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

【讨论】：

它是如何导致 Chrome 出现问题的？它不可能导致所描述的问题，它完全相反。
在 IE 或 Chrome 中似乎没有给我造成问题，请取消投票。
为此增加了补偿。
我看不出它如何对我们中的一些人起作用，但对另一些人则不然，我们中的一些人根本看不到最初的问题，而有些人却...
这修复了左边框问题，但我仍然看到悬停问题，因为它仍然没有填充 100% 的按钮

【解决方案2】：

将.btn 上的overflow: hidden 的锚元素更改为overflow: auto。 overflow: hidden 似乎增加了一些利润。在这里查看更多：

Margin behavior of "overflow:hidden" div after floating div on webkit

Overflow:hidden messing with margins in Chrome and Safari

【讨论】：

我看不到您的答案有任何变化，除非我遗漏了什么？！很有可能：-|
大声笑，对不起，我的浏览器卡住了！调查和更新很快。
这消除了边框和悬停的两个问题，但是在 FF（我假设 IE）中，当您将鼠标悬停在按钮上时，滚动条现在会出现......非常接近
如果你用overflow: auto代替overflow-x: auto; overflow-y: hidden;（在.btn类上）怎么办。试试看。
在调整浏览器大小后，它似乎是 Chrome 百分比问题，正如其他评论者所说的那样。有些宽度适用于其他宽度。

【解决方案3】：

您的问题似乎是由您的 block 元素上的 text-align: center 属性引起的。

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

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

with

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

这是一个演示 fiddle

让我知道这是否会导致其他浏览器出现问题

【讨论】：

这修复了 Chrome 但破坏了 Firefox。

【解决方案4】：

首先，这显然是一个 crhome 错误。

但是，右边框的问题可能很容易“修复”（即使它没有损坏）添加到您的 ::before opacity:0 和您的 hover::before、opacity:1。

在我看来，黑色背景没有填满整个宽度的问题就像在同一类中使用 transform: translateZ(0); 和 z-index:1 相关的错误。如果您同时删除两者，它会修复它，但是您会失去一些效果......但也许您可以尝试另一种方法来制作相同的效果。

【讨论】：

不透明度是个好主意，但它并不能解决整个问题。删除 translate z 和 z-index 也不能解决悬停问题，它所做的只是删除右侧边框（奇怪的是），但背景仍然没有填充 100% 的宽度

【解决方案5】：

这对我来说是一个非常奇怪的问题，但就像大多数其他评论者所说的那样，这确实是一个 Chrome 问题。

我需要彻底消除这个问题，所以最终使用max-width 来克服它，这确实有其自身的缺点。例如，如果按钮标签太长，那么它应该分成两行，如果太短，按钮看起来会过宽，但与我遇到的边框和悬停问题相比，它们是我更满意的妥协。这是供参考的工作小提琴：http://jsfiddle.net/3x4zc8tq/11/

希望 Google 对此进行排序...

【讨论】：