css - Safari Win 中的滑动门 HTML 按钮

Question

我有以下用于实现滑动门技术的按钮的 HTML，这些按钮在 Windows 上除了 Safari 之外的任何地方看起来都很好:

<button type="submit">
    <span>Button</span>
</button>

这是对应的CSS:

button {
    background:url("../images/sprBgBtn.png") no-repeat right -47px;
    border:0;
    cursor:pointer;
    font-weight:bold;
    height:27px;
    line-height:27px;   
    overflow:visible;
    padding:0 26px 0 0;
    position:relative;
    text-align:center;
    text-transform:uppercase;
    width:auto;
}

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    padding:0;
}

button span {
    background:url("../images/sprBgBtn.png") no-repeat left top;
    display:block;
    height:27px;
    line-height:27px;
    padding:0 0 0 26px;
    position:relative;
    white-space:nowrap;
}

如果我省略下面的代码，那么在 FFOX 中也会出现同样的问题:

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    padding:0;
}

Answer 1

我的猜测是那个按钮，默认情况下是一个内联元素(除非你在不在此处的代码中的其他地方覆盖了它的显示属性)，可能不喜欢将内部跨度设置为阻塞，因此在 safari 窗口上出现意外行为(我会假设其他 webkit 浏览器，除非 windows 版本的 safari 比 mac 版本或谷歌浏览器有一些特别的东西)。