css - 文本框中的光标对齐

Question

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

如有任何帮助，我们将不胜感激。

Answer 1

刚遇到这个问题。对我有用的是使用行高。

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