Question

我使用表格和标准CSS为我的网站创建了一个登录区域。我的问题是IE正在添加一些内容，使其与firefox和chrome呈现不同。

我希望输入[type = text“]为固定宽度，并在表格中显示，就像在chrome中一样。

The top image is IE, bottom is 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”而不是text，所以这是固定的。现在只是填充问题。

更新所以不确定发生了什么。没有更改任何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来定位小于/大于指定版本的版本，或者可以完全省略它们以定位特定版本。如果您愿意，也可以定位其他浏览器。

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

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

1 个答案: