如何在IE中使网页上的文本框与Chrome相同

Question

我的ASP.Net网站上有以下HTML：

               <tr>
                    <td><asp:TextBox runat="server" Text="Email" ID="LoginEmail" 
                            CssClass="usernamepassword" Width="160px"></asp:TextBox></td>
                    <td><asp:RequiredFieldValidator runat="server" ID="reqLoginEmail" ControlToValidate="LoginEmail" ValidationGroup="Login" ErrorMessage="*" Display="Static"></asp:RequiredFieldValidator></td>
                    <td><asp:TextBox runat="server" Text="Password" ID="LoginPassword" 
                            TextMode="Password" CssClass="usernamepassword" Width="130px" ></asp:TextBox></td>
                    <td><asp:RequiredFieldValidator runat="server" ID="reqPassword" ControlToValidate="LoginPassword" ValidationGroup="Login" ErrorMessage="*" Display="Static"></asp:RequiredFieldValidator></td>
                    <td><asp:LinkButton runat="server" ID="btnLogin" OnClick="btnLogin_Click" ValidationGroup="Login" Text="Login" class="buttonRyan green medium" > </asp:LinkButton></td>
                </tr>

可以在Google Chrome中正常显示，如下所示：

但是在Internet Explorer上看起来像这样：

请注意，文本框没有那么深，如何使IE版本与Chrome相同？ （Firefox也很薄）

这是我的CSS：

.usernamepassword
{
border-style: none;
border-color: inherit;
border-width: medium;
font: 12px/20px "ArialMTRegular", Arial, Helvetica, sans-serif;
color:#3343030;
padding:0px 1px;
}

Answer 1

您必须修复所有文本框的高度和行高，如下所示：

.usernamepassword {
   height : 18px;
   line-height : 18px;
}

行高将照顾文本框中填充的文本。

IE对CSS​​更敏感。 因此，您必须在CSS中定义所有规则，以便在所有浏览器中都应相同。

Answer 2

看来您必须设置一个固定的height 。 尝试将.usernamepassword设置为height ：

.usernamepassword
{
  ...
  height: 1.5em;
}