Css Safari Win中的滑动门HTML按钮

我有以下HTML用于实现滑动门技术的按钮，除了在Windows上的Safari之外，在任何东西中都看起来不错：

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

如果我省略了以下代码，那么相同的问题将出现在FFOX中：

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

---

我的猜测是，默认情况下，按钮是一个内联元素（除非您在不在这里的代码中覆盖了它的显示属性），可能不喜欢将内部跨度设置为block，从而导致safari窗口出现意外行为（我会假设其他webkit浏览器，除非windows版本的safari比mac版本或google chrome更特别。）

chrome的正确填充似乎减少了，safari解决了这个问题：

/* Safari and Google Chrome only - fix margins */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #icis_dashboard .submit_btn,
    #colorbox .submit_btn 
    {
        padding:0 23px 0 0;       
        }  

    #icis_dashboard .submit_btn span,
    #colorbox .submit_btn span {
        margin-top: -1px;
    }
} 

---

这种情况在Safari Win 5.0.3上也会发生。在Safari Mac 5.0.3或Chrome Win/Mac 8+上不会发生

---

因为它只在Safari Windows上不起作用，我不知道如何“破解它”使用负边距…

按钮在另一个内联元素中使用时只是一个内联元素，而在这里不是这种情况。好的。你知道这是否发生在另一个webkit浏览器（如chrome）中吗？如果不知道，可能有一个修复程序整合到比特定版本safari中内置的版本更新的webkit中?

/* Safari and Google Chrome only - fix margins */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #icis_dashboard .submit_btn,
    #colorbox .submit_btn 
    {
        padding:0 23px 0 0;       
        }  

    #icis_dashboard .submit_btn span,
    #colorbox .submit_btn span {
        margin-top: -1px;
    }
}