刪除HTML按鈕的完整樣式/提交

我在css中爲所有瀏覽器設計了一個提交按鈕，它的所有瀏覽器都可以正常工作，除了ie7 當我點擊提交按鈕時，它會移動到頂部。它使它看起來不合時宜。我爲ie使用了一個特定的CSS。刪除HTML按鈕的完整樣式/提交

這裏是我使用的代碼：

.button 
{ 
    width : 80px; 
    background : none; 
    cursor : pointer; 
    font-family : 'voltaeftu-regular',Times New Roman; 
    font-size : 16px; 
    color : #fff; 
    border : none; 
    margin  : 0px; 
    padding  : 0px; 
}

來源

2010-06-24 Mayur

我不知道如果是這樣的問題，但你可以嘗試設置活動狀態也：

.button, .button:active{ 
... 
}

編輯：用於IE7以下小型樣本，無法看到按鈕移動：

<html> 
<head> 
<style type="text/css"> 
.button 
{ 
width : 80px; 
background : none; 
cursor : pointer; 
font-family : 'voltaeftu-regular',Times New Roman; 
font-size : 16px; 
color : #fff; 
border : 1px solid #0f0; 
margin  : 0px; 
padding  : 0px; 
} 
</style> 
</head> 
<body style="background:#f00;"> 
    <input class="button" type="submit"/> 
</body> 
</html>

剛剛成立一博觀看按鈕環境。代碼正在爲我工作。

來源

2010-06-24 13:58:42 Marks

HI標誌我已經嘗試過，但也沒有工作是否有任何方法來解決這個問題 – Mayur 2010-06-24 14:02:10

你可以嘗試一個重置CSS，看看問題是否仍然存在。但在快速查看重置CSS我沒有看到任何設置的按鈕，可能會導致此。 – Marks 2010-06-24 14:30:03

是的，恐怕這是一個無法迴避的問題與造型的按鈕，IE（和Opera）將在單擊時按鈕的內容由一個像素向下和向右移動。

你有一大堆的可能的方法在這裏：

使用<button>與<span>裏面，而不是一個<input type="button">的。定位按鈕relative和top/left0跨度absolute，使按鍵內容的運動不會影響範圍。醜陋，並會在其他瀏覽器中破解，所以你只希望這種樣式適用於IE-and-maybe-Opera。
使用風格的按鈕，而不是一個實際的按鈕鏈接，與腳本應用到其click事件。與按鈕不同，您可以完全控制鏈接的一致樣式。我會反對這項建議，只要您鏈接的行爲是沒有意義的按鈕，像中單擊鼠標右鍵點擊書籤，拖動和拖放等很多人的負載拖着做使用鏈接做按鈕任務，但海事組織是非常不可取的。（特別是當他們使用javascript:鏈接...可怕。）
使用惰性元素，如<span>而不是實際的按鈕，提供給其click事件腳本。再一次，你得到完整的造型控制。這是SO用於「添加評論」等操作的原因。麻煩的是你打破了鍵盤導航;您不能使用選項卡，空間等來導航和激活控件。您可以通過給元素的tabindex屬性，而是把tabindex無效元素能夠在大多數瀏覽器的鍵盤導航是無效的HTML。您也可以從腳本編寫它，並添加腳本以允許空間或返回來激活人造按鈕。但你永遠不會相當完美再現瀏覽器表單字段的行爲。
更換整個事情與<input type="image">。當然，你可以對圖像進行像素完美控制！但是試圖匹配渲染樣式，併爲每個按鈕生成一個新圖像，通常是太過痛苦的脖子。

選項2和3也有問題，它們引入了JavaScript依賴項，所以當JS不可用時，表單會中斷。您可以通過在標記中使用正常的<button>並使用腳本中的其他控件替換它，或者如果您是通過腳本創建它們，則無需任何處理。但最終，我平時的結論是，這是所有太多精力和太脆弱的結果，那最好的辦法是爲豐滿選擇0：

忍受它。按鈕內容在點擊時會稍微移動一點通常不是那麼糟糕。

來源

2010-06-24 15:12:59 bobince

這也給我留下了很長時間，但我找到了一個體面的解決方案。

首先，您需要某種方式來定位CSS中的特定瀏覽器。你可以使用Modernizr的，或我個人最喜歡的，這個可愛的小片段從http://rog.ie/post/9089341529/html5boilerplatejs

<script> 
var b = document.documentElement; 
b.setAttribute('data-useragent', navigator.userAgent); 
b.setAttribute('data-platform', navigator.platform); 
</script>

接下來，在HTML文檔中，你的按鈕內，加<span>標籤保存按鈕的內容。風格它看起來在友好的瀏覽器的罰款，那麼這段代碼添加到該按鈕的:active風格在你的CSS：

html[data-useragent*='Opera']

你可以使用任何瀏覽器的名稱替換Opera，然後風格的span根據自己的喜好。

它可能是這個樣子：

html[data-useragent*='Opera'] button:active span { 
    position: relative; 
    left: -1px; 
    top: -1px; 
}

這是一個有點哈克，併爲這樣的小問題可能是矯枉過正，但它的作品。最重要的是，你可以精確控制一切。你甚至可以只針對Windows機器，或iPad上的（與data-platform='iPad'），或特定版本的瀏覽器中，像這樣：

html[data-useragent*='Chrome/13.0']

祝你好運！

來源

2012-06-10 17:36:20

這應該得到更多的讚揚 – Forza 2014-02-14 23:14:10

刪除HTML按鈕的完整樣式/提交

回答

相關問題