首頁 >web前端 >css教學 >css修正Input標籤在各種瀏覽器中差異

css修正Input標籤在各種瀏覽器中差異

高洛峰
高洛峰原創
2016-11-24 14:58:301546瀏覽

首先,說明一下表單標籤(input、select)可能在各種瀏覽器中的表現差異:
1.當input或select與其他標籤(例如a、label)混排時,可能出現不居中的問題。
2....混排時,外層標籤無法控製表單標籤。
3.input裡面輸入的文字行高有差別,有空隙等等。


解析現象:
input:text特性時,
預設:
1.firefox高度height為16px;IE下高度為14px;
2.字體大小為:13.3333px;
值;
值:Firefox為:padding:1px 0;IE下為:padding:1px 0 3px 0;

解決實例:如下代碼:







無標題文件<br><style type="text/css"><br/>body {<br/>    font-family:"宋體";<br/>    font-size:12px;}<p>🠎table {🠎 red 1px;<br/>}<br/>td,th {<br/>    border:solid red 1px;<br/>    height:40px;<br/>}<br/>label { 0px;<br/>    padding:0; <br/>    font-family:"宋體";<br/>      font-family:"宋體";<br/>    font-size:12px;<br/>    height:15px;<br/>   0FF 1px;<br/>}<br/><br/></style> <br><br>


          <. name="aj" type="text" maxlength="6" class="inputtxt">

       
     
   


   
     
     
   
second





這種情況下IE和firefox都一樣瞭如下圖:


這種情況下IE和firefox都一樣瞭如下圖:



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn