Safari 5.0ボタンの間隔

私はウェブサイトのボタンで忙しいです。 Chrome、IE、Firefoxではすべてのボタンが美しく見栄えますが、Safari 5.0では奇妙な間隔があります。Safari 5.0ボタンの間隔

はここにスクリーンショットを参照してください：

enter image description here

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>

どのように私はこの問題を解決することができますか？

出典

2011-07-20 Maanstraat

は、あなたが、私たちはそれを操作できるように、画像への直接URLをhttp://jsfiddle.netを投稿することができますか？ – tw16

私はHTMLを編集してスパンの周りにdivを置いて、それから私はそれを働かせます:) – Maanstraat

あなたはあなたの解決策を下に置き、それからこの質問に遭遇する他の人々のために受け入れられたものとしてマークするべきです。 – tw16

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>

出典

2011-07-21 07:42:27 Maanstraat

答えて

関連する問題