zoukankan      html  css  js  c++  java
  • ie、火狐、谷歌浏览器,光标定位问题

    IE:不管该行有没有文字,光标高度与font-size一致。

    FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

    Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。


    解决的方案:
    给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

    input{
    height: 16px;
    padding: 4px 0px;
    font-size: 12px;
    }

    CSS可以参照如下定义,注意顺序:
    #menu { line-height: 23px; } /* firefox 浏览器实行这句定义 */
    #menu { line-height: 26px9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/
    #menu { *line-height: 23px; } /*ie6,ie7 这句定义主要尖对IE7来hack*/
    #menu { _line-height: 23px; } /*ie6 浏览器优先实行这句定义*/ 或者写成一句

    #menu { line-height:23px; line-height: 26px9; *line-height: 23px; _line-height:23px; } 或者

    * html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */
    *+html #menu { line-height: 23px; } /* IE7 浏览器实行这句定义*/


    以上的解决方案有时候不好用,可以对不同浏览器设置不同的line-height,就利用以上的规则

    .dp_search input.search_txt{height:30px;380px;font-size:12px;color:#cccccc;float:left;padding-left:5px;padding-right: 5px;border:3px solid #8e0000;line-height:16px;line-height:30px9;}


    以上的css代码,设置line-height:30px的时候,谷歌浏览器下,光标撑大,而且输入字的同时,光标顶着输入框往下,不居中;根据以上的规则所以设置line-height:16px,但此时,火狐浏览器下正常,但ie浏览器下又不对了,输入的字体往上跑,所以根据以上规则单独给ie浏览器设置一个line-height:16px9;

    http://www.cnblogs.com/qingling/p/3361923.html

  • 相关阅读:
    JavaWeb(一)
    关于servlet的配置
    jquery中attr和prop的区别
    javascript-02
    javascript-01
    css
    css-02
    html扫盲-01
    Java 之 FileReader FileInputStream InputStreamReader BufferedReader 作用与区别
    Eclipse项目的.classpath文件
  • 原文地址:https://www.cnblogs.com/blosaa/p/3906543.html
Copyright © 2011-2022 走看看