拉門HTML按鈕

我有以下的HTML實現滑動門技術，在一切，但Safari瀏覽器看起來正常的Windows按鈕：拉門HTML按鈕

<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; 
}

來源

2010-10-11 RyanP13

它出現在右填充爲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; 
    } 
}

來源

2010-10-12 12:36:23 RyanP13