input文本输入框的文字居中处理

曾经终败给现在 2022-06-09 03:09 631阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>input测试</title>
    <style type="text/css">
    /*reset.css*/
    body{width:960px;margin:10px auto;padding:0;font:12px/1.5 Arial, Helvetica, sans-serif;}
    input { padding:0; }
    /***---测试高度解析，文本居中差异以及提示输入线差异---***/
    .gb_sear input { 
        font:16px "宋体", arial; 
        /*font:16px arial;*/ 
        height:28px; 
        line-height:28px\9; 
        _line-height:29px; 
        width:14em; 
        padding-left:4px; 
        border:1px solid #ace;
        overflow:hidden;
        outline:none;
    }
    .gb_sear label { 
        display:inline-block;
        position:relative; 
        top:2px;
        *top:-4px;
    }
    /***---无关测试样式---***/
    h1{padding:10px 0;font-size:14x;color:#f60;margin:0 0 20px 0;line-height:1.5;border-bottom:1px dashed #999;}
    .test,.test_result{border:1px solid #666;padding:10px;margin-top:10px;}
    .test_result li{line-height:1.7;color:#800000;}
    </style>
    </head>
    <body>
    <div class="test">
      <h1>input文本居中测试</h1>
      <div class="gb_sear">
        <label for="search">请输入搜索关键字:</label>
        <input type="text" id="search"/>
      </div>
    </div>
    <div class="test_result">
      <h1>测试结论</h1>
      <ul>
        <li>"宋体"在行高的表现上，浏览器解析效果相当一致，除了那傻逼的IE6，用在表单文本输入框上亦是如此。使用arial则会出现兼容问题。</li>
        <li>非IE的标准浏览器，在对input文本输入框中的文字进行居中时，不必设置line-height。而chrome浏览器在遇到line-height声明时还会产生难看的输入提示线（位置和高度都不好看）。</li>
        <li>无论字体设置多大，使用什么字体族，IE6文本居中都会“出错”。一个好的解决方法是，对于IE6，把通用的line-height值增加一个像素，居中效果就相当完美了。</li>
      </ul>
    </div>
    </body>
    </html>