防止單擊按鈕創建按下的效果

Question

我有一個窗體上的按鈕;

<button type="button" class="button" onclick="validate_form_newsletter_wide(form)"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button> 

它的樣式使用;

<style> 

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner { 
    padding: 0 !important; 
    border: 0 none !important; 
} 

#form_newsletter_wide .button { 
position:relative; 
float: right; 
cursor:pointer; 
border: 0px; 
padding: 0px; 
margin: 0px; 
margin-top: -1px; 
z-index:100; 
} 

</style> 

當在Firefox一無所知按鈕變爲點擊，在Chrome我避開它，我可以用，但在IE中它更多的壓制效果，其中的按鈕看起來幾乎是向下移動和生活的按鈕高亮邊框對。無論如何要防止這一點？

Answer 1

這是一個瀏覽器行爲，一個簡單的解決方案是使用鏈接標記而不是按鈕（因爲你正在調用一個javascript函數）。

<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a> 

如果你仍然想使用，我發現有對每個瀏覽器的一些特性（在一個簡單的調試）：

• 鉻添加的輪廓和填充
• Firefox增加了一大堆東西與標準按鈕邊框
• IE混亂的內部文本位置

所以要解決它們，你必須操縱按鈕行爲的僞選擇器。而對於IE來說，一個好的解決方案就是將文本嵌入到一個元素中，並使其相對定位。像這樣：

<button type="button" class="button"><span>Buttom or Image</span></button> 

<style> 
    button, 
    button:focus, 
    button:active{ 
     border:1px solid black; 
     background:none; 
     outline:none; 
     padding:0; 
    } 
    button span{ 
     position: relative; 
    } 
</style> 

Pen