输入区域在 IE 和 Chrome 中显示不同

Question

我使用表格和标准 CSS 为我的网站创建了一个登录区域。我的问题是 IE 在其中添加了一些东西，这使得它与 Firefox 和 chrome 呈现不同。

我希望 input[type=text"] 是固定宽度并像在 chrome 中一样显示在表格中。

上图是 IE，下图是 Chrome。 IE 没有设置固定宽度，而是在其中添加了某种填充。

CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i, marquee {margin: 0px;padding: 0px;/*border: 0px;*/outline: 0px;}
body  {background: #F4F4F3 url(../images/bg.gif) repeat 0 0;font-size: .80em;font-family: ‘Lucida Grande’, ‘Lucida Sans’, ‘Lucida Sans Unicode’, Arial, sans-serif;margin: 0px;padding: 0px;color: #2B2818;}
#ctl00_login td {max-height:28px;padding:0px;}
#ctl00_login input[type="text"] {padding:0px; margin:0px;width:155px;}

.aspx 文件

                    <div id="login" runat="server" visible="false">
                    <table style="margin: 0 auto;" cellpadding="0" cellspacing="0" border="1">
                        <tr>
                            <td valign="middle" width="64px">
                                Username:
                            </td>
                            <td valign="middle">
                                <asp:TextBox ID="logUser" runat="server" CssClass="login-input"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="logUserRqd" ControlToValidate="logUser" runat="server"
                                    Text="&nbsp;<img src='images/err.png' alt='*' title='Please enter your username'>"
                                    ErrorMessage="Please enter your username"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle" width="64px">
                                Password:
                            </td>
                            <td valign="middle">
                                <asp:TextBox TextMode="Password" ID="logPwd" runat="server" CssClass="login-input"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="logPwdRqd" ControlToValidate="logPwd" runat="server"
                                    Text="&nbsp;<img src='images/err.png' alt='*' title='Please enter your password'>"
                                    ErrorMessage="Please enter your password"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a class="fancybox fancybox.iframe" href="~/Account/Register.aspx">Register</a>
                            </td>
                            <td align="right">
                                <asp:Button ID="loginBtn" runat="server" Text="Login" onclick="loginBtn_Click" class="button" Style="margin: 3px 25px 0 0;" />
                            </td>
                        </tr>
                    </table>
                </div>

编辑 我发现第二个的固定宽度是因为它是 type="password" 而不是文本，所以这是固定的。现在只是填充问题。

更新 所以不确定发生了什么。没有更改任何 CSS 或任何东西，而是在我的页面中添加了 JQuery 1.7.1，然后在页面上执行了 ctrl+F5 并突然修复。

Answer 1

您使用的是哪个版本的 IE？已知某些版本的 IE 会错误地显示 HTML，尤其是填充/边距和对齐方式。事实上，IE（尤其是旧版本）的问题非常令人沮丧和耗时，以至于一家澳大利亚电子商务公司正在向 IE7 的用户收取额外费用，以支付与支持它相关的额外费用！

如前所述，CSS 重置是解决此问题的一种方法。

解决此问题的另一种方法是有条件地在模板中包含特定于 IE 的样式表。例如。

<!--[if lte IE 8]>
    <link href="older.css" type="text/css" rel="stylesheet">
<![endif]-->

本示例将样式表“older.css”应用于任何早于 8 的 IE 版本（例如 IE7、IE6），但不适用于 IE8 本身。您可以使用 lte/gte 来定位小于/大于指定版本的版本，或者您可以完全省略它们以定位特定版本。如果您愿意，您也可以定位其他浏览器。

这不是您问题的完整答案，但应该为您指明正确的方向。希望对你有帮助！