不同瀏覽器上input與select寬度顯示不同的本質原因
做表單開發時經常碰到一個問題，input和select是其中最常用的兩個標籤，但是有個問題很棘手。input和select是兩種不同的和模型，如果只是簡單的將兩者的width設定成一樣，將會出現下面的效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} body{margin: 50px;} input{outline-style: none;} .input{ width:100px; } .select{ width:100px; } </style> </head> <body> <div><input class="input" type="text" /></div> <div> <select class="select"> <option>opt1</option> <option>opt2</option> <option>opt3</option> </select> </div> </body> </html>
並且是在所有的瀏覽器中都是這樣，下面直接來看看各個瀏覽器中的盒模型佈局就會一目瞭然；
chrome:
firefox:
IE：（這裡IE要分代，IE8之前是一代，IE9之後是一代，看圖明瞭）
這兩個標籤在不同瀏覽器上的表現明顯不同，總結一下：
模型：border + realwidth
chrome -> firefox -> IE9+ ->IE8-
select:
2*2 + 98 -> 0*2 + 100 -> 1*2 + 98 -> 1*2 + 100 (102 100 100 102)
input:
2*2 + 100 -> 1*2 + 100 -> 1*2 + 100 -> 1*2 + 100 (104 102 102 102)
無論是哪一種情況，都會多出來2px(IE8-看似都是102，但是效果還是多出來2px),這個足夠讓處女座抓狂！我不是處女座，但是在實踐過程中也為此抓狂過，不探索出本質原因和解決方案實在讓人不安，還好是有解！其實加個內邊距，一切疑惑都會迎刃而解。
select的css width樣式，包含邊框和內邊距，即：realwidth=CSS width。
而input的css width樣式，則不包含邊框和內間距，realwidth=CSS width + border + padding。
解決的方法如下：（下圖只是chrome的佈局，大家可以試試在各個瀏覽器中都是有規可循的）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} body{margin: 50px;} div{margin-bottom:1px;} input{outline-style: none;} select div{border: 0;} .input{ width:96px; border: 1px solid #707070; padding: 1px!important; } /* 96+1*2+1*2=100 */ .select{ width:100px; padding:1px; border: 1px solid #707070; } /* 98+1*2+0*2=100 */ </style> </head> <body> <div><input class="input" type="text" /></div> <div> <select class="select"> <option>opt1</option> <option>opt2</option> <option>opt3</option> </select> </div> </body> </html>
總結：
設定select的CSS width=input 的CSS width border padding
Done perfectly!