Safari 5.0 按钮间距答案

【问题标题】：Safari 5.0 Button spacingSafari 5.0 按钮间距
【发布时间】：2011-07-20 08:09:53
【问题描述】：

我正忙于处理网站上的按钮。在 Chrome、IE、Firefox 中，所有按钮看起来都不错，但在 Safari 5.0 中，间距很奇怪。

请看这里的截图：

CSS：

button{
    background-image : url(../gfx/forms-btn-l.gif);
    background-position : left top;
    background-repeat : no-repeat;
    background-color : transparent;
    border : none;
    outline: none;
    padding : 0 0 0 13px;
    margin : 0 ;
    cursor : pointer;
    overflow: visible;
    width : auto;
    height : 30px;
}

span{
    float : left;
    background-image : url(../gfx/forms-btn-r.gif);
    background-position : right top;
    background-repeat : no-repeat;
    background-color : transparent;
    overflow : hidden;
    padding : 0 13px 0 0;
    margin : 0;
    font-family : Arial;
    font-size : 12px;
    font-weight : bold;
    line-height : 2.44em;
    text-shadow: 1px 1px 1px #d75700;
    color : #FFFFFF;
    white-space : nowrap;
    height : 30px;
}

HTML： <button type="submit"><span>Zwart</span></button>

我该如何解决这个问题？

【问题讨论】：

你能发布一个jsfiddle.net 并带有图片的直接网址，以便我们对其进行操作吗？
我已经编辑了 html 并在 de span 周围放置了一个 div，然后我让它工作了 :)
您应该将您的解决方案放在下面，然后将其标记为已接受，以供遇到此问题的其他人使用。

标签： html css xhtml button safari

【解决方案1】：

CSS：

button{
    background : none;
    border : none;
    outline: none;
    padding : 0;
    margin : 0 4px 0 0;
    cursor : pointer;
    overflow: visible;
    height : 30px;
}

button div {
    background-image : url(../gfx/forms-btn-l.gif);
    background-position : left top;
    background-repeat : no-repeat;
    background-color : transparent;
    border : none;
    outline: none;
    padding : 0 0 0 13px;
    margin : 0 ;
    cursor : pointer;
    overflow: visible;
    width : auto;
    height : 30px;
}

span{
    float : left;
    background-image : url(../gfx/forms-btn-r.gif);
    background-position : right top;
    background-repeat : no-repeat;
    background-color : transparent;
    overflow : hidden;
    padding : 0 13px 0 0;
    margin : 0;
    font-family : Arial;
    font-size : 12px;
    font-weight : bold;
    line-height : 2.44em;
    text-shadow: 1px 1px 1px #d75700;
    color : #FFFFFF;
    white-space : nowrap;
    height : 30px;
}

HTML： <button type="submit"><div><span>Zwart</span></div></button>

【讨论】：