如何在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。 尝试将height设置为.usernamepassword：

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