ie、火狐、谷歌瀏覽器,光標定位問題

 1 IE:無論該行有沒有文字,光標高度與font-size一致。
 2 
 3 FF:該行有文字時,光標高度與font-size一致。該行無文字時,光標高度與input的height一致。
 4 
 5 Chrome:該行無文字時,光標高度與line-height一致;該行有文字時,光標高度從input頂部到文字底部(這兩種狀況都是在有設定line-height的時候),若是沒有line-height,則是與font-size一致。
 6 
 7 
 8 解決的方案:
 9 給input的height設定一個較小的高度,而後用padding去填充,基本上能夠解決全部瀏覽器的問題
10 
11 input{  
12 height: 16px;  
13 padding: 4px 0px;  
14 font-size: 12px;  
15 }  
16 
17 CSS能夠參照以下定義,注意順序:
18 #menu { line-height: 23px; }  /* firefox 瀏覽器實行這句定義 */
19 #menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對IE8來hack*/
20 #menu { *line-height: 23px; } /*ie6,ie7 這句定義主要尖對IE7來hack*/
21 #menu { _line-height: 23px; } /*ie6 瀏覽器優先實行這句定義*/ 或者寫成一句
22 
23 #menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; } 或者
24 
25 * html #menu { line-height: 23px; } /* IE6 瀏覽器實行這句定義 */
26 *+html #menu { line-height: 23px; } /* IE7 瀏覽器實行這句定義*/ 以上的解決方案有時候很差用,能夠對不一樣瀏覽器設置不一樣的line-height,就利用以上的規則.dp_search input.search_txt{height:30px;width:380px;font-size:12px;color:#cccccc;float:left;padding-left:5px;padding-right: 5px;border:3px solid #8e0000;line-height:16px;line-height:30px\9;}以上的css代碼,設置line-height:30px的時候,谷歌瀏覽器下,光標撐大,並且輸入字的同時,光標頂着輸入框往下,不居中;根據以上的規則因此設置line-height:16px,但此時,火狐瀏覽器下正常,但ie瀏覽器下又不對了,輸入的字體往上跑,因此根據以上規則單獨給ie瀏覽器設置一個line-height:16px\9; 
相關文章
相關標籤/搜索