0

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

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

上图是 IE，下图是 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 并突然修复。

4

1 回答 1

0

你用的是哪个版本的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 来定位小于/大于指定版本的版本，或者您可以完全省略它们以定位特定版本。如果您愿意，也可以针对其他浏览器。

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

于 2012-06-17T21:42:47.627 回答