形式提交按鈕移動切割圖像

我有一個提交按鈕，使用下面的CSS樣式很是：形式提交按鈕移動切割圖像

.subm 
{  
background-color:Transparent; 
background-image:url(Images/Button_Send.png); 
background-repeat:no-repeat; 
width:82px; 
height:30px; 
display:block; 
border:none; 
outline:none; 
overflow:visible;} 

    .subm:hover 
{ 
    background-color:Transparent; 
    background-image:url(Images/Button_Send_Over.png); 
    background-repeat:no-repeat; 
    width:82px; 
    height:30px; 
    display:block; 
    border:none; 
    outline:none; 
    overflow:visible; 
}

下面是HTML：

<input type="submit" class="subm" value="" />

沒什麼希奇。然而，讓我感到懊惱的是，當在IE中單擊提交按鈕時，它將圖像向上移動了幾個像素，從而將它們關閉，這使得它看起來，嗯，好詞「naff」。我該如何補償或阻止？

我已經嘗試擴大圖像，並留下幾個空白像素在頂部，但它仍然做同樣的事情！

謝謝R.

來源

2009-11-11 flavour404

嘗試用按鈕標記替換輸入。

<button type="submit"><img src="..." alt="..." /></button>

看看這是不是做到了。您需要調整懸停效果，儘管可能需要將文本放入按鈕中，並使用負面的文本縮進或JavaScript懸停事件來更改引用的圖像。

另一種選擇是使用JavaScript調用表單在常規鏈接上提交，因爲按鈕通常具有點擊動畫。

只是注意，你也許可以通過添加背景位置得到更一致的結果，而這一切，你可以速記以及

.subm:hover 
    { 
    background: transparent url("Images/Button_Send_Over.png") top center no-repeat; 
    }

另一個也許更理想的選擇，使用輸入類型的圖像，而不是提交。

<input type="image" src="..." Value="Submit" />

來源

2009-11-11 22:34:46 thismat

我敢肯定，這說明了錯誤，並有一些對你的解決方案：

Fixing the IE8 Form Button with Background Image On Click CSS Bug

來源

2009-11-11 22:47:37 Bertine

我有我的按鈕走動，他們點擊後，在IE後，我稱呼他們的問題太。我找到的解決方案是：

1）給你的按鈕（一個或多個）等於利潤率 2）將在包裝分割按鈕（一個或多個），您可以定位到您喜歡

.subm {  
    background-color:Transparent; 
    background-image:url(Images/Button_Send.png); 
    background-repeat:no-repeat; 
    width:82px; 
    height:30px; 
    display:block; 
    border:none; 
    outline:none; 
    overflow:visible; 
    margin:10px; //maybe more maybe less 
} 

<div style="position:...;float:...;"> 
    <input type="submit" class="subm" name="myButton" id="myButton" /> 
</div>

雖然我必須提到，在我的具體情況下，我使用ID來設置按鈕的樣式，而不是應用類，以便使用.subm類可能會出現多個按鈕的問題。這是在IE瀏覽器中爲我工作的。

來源

2013-03-07 10:20:38

形式提交按鈕移動切割圖像

回答

相關問題