網頁按鈕使用div仍是button的爭議，以及button樣式的正確寫法

使用div的好處是：通常作網頁人都進行大量div使用，對div的效果已經瞭如執掌了。很差處是：語義化差，不能享受瀏覽器的自帶效果（如Tab鍵切換）。

使用button的好是：語義化好，有瀏覽器的自帶效果。很差處是：不少人想固然的按照div的習慣使用，致使兼容性差（Bootstrap也有這個錯誤還甩鍋給火狐）。

 

我的觀點：

前端開發者應當掌握button樣式的寫法，業務開發者應當使用封裝好的class。用div的要改爲a標籤而不是div。

 

本文主要是想介紹一下button樣式的寫法

首先標籤的type屬性不可省略

<button type="button">按鈕</button>

一般在div中會使用padding實現垂直居中。button是自帶居中的，應當固定height的值。

在舊瀏覽器中button是帶有厚的border，薄爲0的padding。因此早期的網頁有*{padding:0}不會影響按鈕。可是在新的瀏覽器中button自帶的border較薄，padding比較厚。因此不能使用*{padding:0}，這回致使按鈕很小。

通常按鈕的樣式會加上邊框和背景，按照一般的用法border:1px solid #000;便可。

效果：

http://raw.githack.com/linsk1998/ting/master/css/button.html