在文本框中的光标对齐

问题描述：

我有一个窗体，看起来完全是我想要的除IE外的每个浏览器的方式。我一直在有困难的时候搞清楚做出什么调整，我需要做的CSS在IE中右看看（现在仍然期待权在所有其他主流浏览器的）在文本框中的光标对齐

我的HTML是：

 <td valign="top" align="left"> 

     <form name="postcode" action="plans.php" method="post"> 
     <input type="text" name="c" size=1 class="postcode" onKeyup="autotab(this, document.postcode.o)" maxlength=1> 
     <input type="text" name="o" size=1 class="postcode" onKeyup="autotab(this, document.postcode.d)" maxlength=1> 
     <input type="text" name="d" size=1 class="postcode" onKeyup="autotab(this, document.postcode.e)" maxlength=1> 
     <input type="text" name="e" size=1 class="postcode" maxlength=1> 
     <br/><br/><br/> 
     then choose...<br/><br/> 
     <input name="electricity" type="checkbox" value="electricity" />electricity 
     <br/> 
     <input name="gas" type="checkbox" value="gas" />gas 
     <br/><br/><br/><br/> 
     <input type="image" src="images/billCompare-view-plans.gif" value ="show plans" > 
      </p> 
     </form> 
    </td>

和我的CSS是：

@charset "UTF-8"; 
    /* CSS Document */ 
    body { 
     font-size:14px; 
     font-family:"Century Gothic"; 
    } 

    .table_header{ 
     font-size:18px; 
     font-family:"Century Gothic"; 
     color:#FFF; 
    } 

    .body_text{ 
     text-align:justify; 
    } 

    .menu{ 
     text-align:right; 
     vertical-align:bottom; 
    } 

    .postcode{ 
      border-style:double; 
      font-size:20px; 
      border-color:#F60; 
      text-align:center; 
      vertical-align:middle; 
      height:70px; 
    } 

    input.checkbox{ 
    height:40px; 
     width: 40px; 
    } 

    form p label { position: absolute; top: 0; left: 0;}

上的所有其他浏览器光标在盒子的中心，中间对齐（这是我想要什么）。但由于某种原因，IE在对齐的中心和顶部。

任何帮助将不胜感激。

答

刚才有这个问题。对我来说有效的是使用行高。

尝试增加的line-height：70像素，以.postcode

我设置了一个页面来重现这一点，但没有解决它。当我补充说，它适用于IE，但在Chrome上，光标垂直填充整个框。当您输入内容时，它会更改大小以填充框的上半部分。这对freddy6来说可能不是问题。 – paulmorriss 2011-04-06 07:55:39

这非常有趣。我也有同样的问题。我可能不得不尝试填充而不是使用行高，并看看我能否获得更好的结果。 – solartic 2011-04-06 15:12:25

line-height：175％和text-indent：5px适用于我的特殊情况......在Mozilla Firefox和Internet Explorer中看起来都不错。 IE浏览器对齐了顶部文本框的光标位置，而Firefox很好 - 所以现在这两个CSS规则都适用于这两种浏览器 – katura 2011-07-29 18:53:25

答

您需要设置一个百分比输入line height：line-height: 140%;。

百分比值将对齐占位符和输入文本。

在文本框中的光标对齐

相关推荐