文本框中的光标对齐答案

【问题标题】：cursor alignment in textbox文本框中的光标对齐
【发布时间】：2011-07-29 23:22:15
【问题描述】：

我有一个表单，它在除 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 中居中对齐并位于顶部。

任何帮助将不胜感激。

【问题讨论】：

标签： css internet-explorer forms

【解决方案1】：

刚遇到这个问题。对我有用的是使用 line-height。

尝试将 line-height: 70px 添加到 .postcode

【讨论】：

我设置了一个页面来重现这个，但没有解决它。当我添加 IE 可以，但在 Chrome 上，光标垂直填充整个框。当您键入内容时，它会更改大小以填充框的上半部分。这对 freddy6 来说可能不是问题。
这很有趣。我也有同样的问题。我可能不得不尝试使用填充而不是使用 line-height，看看是否可以获得更好的结果。
line-height: 175% and text-indent: 5px 适用于我的特殊情况……在 Mozilla Firefox 和 Internet Explorer 中看起来都不错。 IE 将文本框的光标位置对齐在顶部，而 Firefox 很好 - 所以这两个 css 规则现在在两种浏览器中都可以正常工作

【解决方案2】：

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

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

【讨论】：