Question

我正在尝试在当前项目跨浏览器中设置按钮样式。当我在Safari中检查这些按钮时，它们看起来与任何其他浏览器不同，甚至是Chrome。通常情况下，按钮在FF，IE6-8，Opera和Chrome中看起来相同。但是在Safari按钮的左侧和右侧有3px未知的额外空间，因此按钮在Safari中看起来更宽，而不是在Chrome或其他浏览器中。 Safari Web检查器中的按钮总宽度比Chrome Web检查器中的大6px。此外，只有当按钮具有宽度时才会出现这种奇怪的行为：自动，固定宽度按钮显示正常。由于Safari和Chrome具有相同的布局引擎（webkit），我有点尴尬。

以下是我所谈论的演示：

http://iliadraznin.com/examples/css-only-buttons/ - 检查Chrome中的蓝色按钮，然后与Safari进行比较（您可以在Web检查器中看到确切的区别）。

更新：这个例子不是我的，它只是说明了Safari的行为方式。这是我确切的CSS和HTML：

<button class="blueButton" type="submit">Register</button>

.blueButton {
    color:#fff;
    background:#007ec6;
    border:2px solid #211b4d;
    cursor:pointer;
font:14px Arial;
text-shadow:#003585 0 -1px 1px;
width:auto;
overflow: visible;
padding:0 13px;
height:26px;
white-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior:url(PIE.htc);
position:relative;}

button::-moz-focus-inner {padding:0;border:0;}

如果您将完全删除填充，您将在Safari中看到确切的额外小空间

有没有办法在Safari中摆脱这个额外的按钮空间？

Answer 1

以下是您寻求的答案：

.blueButton {
    color:#fff;
    background:#007ec6;
    border:2px solid #211b4d;
    cursor:pointer;
    font:14px Arial;
    text-shadow:#003585 0 -1px 1px;
    width:auto;
    overflow: visible;
    padding:0 13px;
    height:26px;
    white-space:nowrap;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    behavior:url(PIE.htc);
    position:relative;
}

.blueButton::-moz-focus-inner {padding:0;border:0;} 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .blueButton {
        margin: 0px;
    }
}

如何删除3px left＆amp; Safari 5中的按钮上有多余的空间？

1 个答案: