在給一個網站做適配的時候,遇到的問題,input和select 均設置相同的寬度,最后瀏覽器下呈現出來的寬度不一樣,一時間很難下手。
於是找到了根本原因
select的css width樣式,包含邊框和內邊距,即:真實的width=CSS width。
而input的css width樣式,則不包含邊框和內間距,真實的width=CSS width border padding。
解決的方法:
給select添加 box-sizing: border-box; 以后完美解決。
普及box-sizing知識
為元素設置:box-sizing: border-box;,則表明width的寬度為內容本身寬度+padding+border(高度一樣)
為元素設置:box-sizing: content-box;,(默認就是這個),則表明width的寬度就是內容本身的寬度,padding以外的再另算。
而input、select默認的樣式是不同的,所以就造成了width設置的一樣,但就是對不齊。全部設成border-box就省事了。
(IE8及以上版本支持。)