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

刚出现这个问题。对我有用的是使用行高。

尝试添加行高：70px到.postcode

Answer 2

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

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

文本框中的光标对齐方式

2 个答案: