Safari 5.0按钮间距

Question

我正忙着网站上的按钮。在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>

我该如何解决这个问题？

Answer 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>