如何在Chrome和Firefox中使按鈕輸入風格相同？

在Chrome和FireFox中查看this JSFiddle example。如何在Chrome和Firefox中使按鈕輸入風格相同？

在Chrome中，按鈕應該比FireFox小一點。我已經添加了來自How to reset default button style in Firefox 4 +的解決方案CSS（使按鈕稍小一些），但FireFox中的按鈕仍然更大。這個例子中的差異不是很明顯，但看看它是如何影響我的設計的。

鉻：
Chrome screenshot

火狐：
FireFox screenshot

正如你所看到的按鈕是在FireFox較厚，影響到佈局。有沒有什麼方法可以避免使用風格的div代替按鈕？

而且，我使用Meyer的CSS樣式表復位

來源

2012-07-23 Hubro

我的結論是，確保按鈕/提交輸入在瀏覽器中保持一致的唯一方法是使用div重新創建它們。創建按鈕輸入非常簡單，因爲您可以將點擊事件附加到div上，就像在按鈕上一樣。創建提交輸入幾乎沒有任何困難。我使用jQuery通過聲明一個類來解決它，例如'submit'，並將提交按鈕功能添加到所有加載該類的元素。下面是一個exampe：

// On page load: 
$('.submit').on('click', function(e) { 
    $(this).closest('form').submit(); 
});

的div的提交類不在形式點擊時會做什麼。

如果您將tabindex="n"（其中n是一個數字）添加到元素，則它也可以使用選項卡進行聚焦，就像普通按鈕一樣。你也可以使用:focus css僞類來表明它的重點。然後，你可以使用空格或輸入點擊與此事件處理程序的按鈕：

$('.submit').on('keypress', function(e) { 
    if (e.keyCode == 13 || e.keyCode == 32) 
     $(this).closest('form').submit(); 
});

_{（我寫的匆忙過去的片段，並沒有實際測試它，如果你在它或測試發現錯誤它成功請相應地編輯這個答案。）}

來源

2012-07-27 21:08:50 Hubro

+1;我討厭瀏覽器使輸入風格變得困難，因爲我討厭從頭開始重新創建所有功能。我不建議這樣做，但有時候你必須做你應該做的事情。另外，極小的語義改進，使用'$（this）.closest（'form'）。submit（）;' – 2012-08-08 17:03:11

是的，我剛剛閱讀了這兩個函數的文檔，'nearest'更適合這個任務。感謝您指出。 – Hubro 2012-08-09 11:53:04

鍵盤焦點與製表鍵和按下輸入這個工作？ – 2014-03-06 21:12:24

火狐增加了一個特殊填充，以input S和button元素。這照顧它：

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

來源

2012-07-23 02:52:07 banzomaikaka

我已經這樣做了，因爲我在我的問題 – Hubro 2012-07-23 02:53:25

陳述對不起，沒有看到。 -moz-focus-inner通常是造成跨瀏覽器按鈕尺寸差異的原因。沒有通讀整個問題tbh。 – banzomaikaka 2012-07-23 03:18:09

你試過CSS重置？我沒有這臺計算機上的FF，否則我會檢查它是否有效。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">

來源

2012-07-23 02:53:44 Jeff

我已經在使用它了，編輯它來解決我的問題。此外，JSFiddle默認標準化CSS。 – Hubro 2012-07-23 02:55:09

你有沒有在頁面上的按鈕上設置line-height？你沒有在小提琴上，但line-height的其他正常，不接受Firefox和其他瀏覽器，我相信 - 也許IE瀏覽器，我不知道。

來源

2012-07-23 03:20:18 banzomaikaka

我沒有碰過'line-height'屬性。好的想法，但爲什麼會影響按鈕的寬度？ – Hubro 2012-07-23 03:27:40

在圖像上，寬度似乎並沒有改變。也許他們是。我不確定。 – banzomaikaka 2012-07-23 03:31:24

您的網頁在線嗎？我可以看看它。 – banzomaikaka 2012-07-23 03:32:20

如何在Chrome和Firefox中使按鈕輸入風格相同？

回答

相關問題