input和select在瀏覽器中寬度不同解決方案(原創)


在給一個網站做適配的時候,遇到的問題,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及以上版本支持。)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM