0

テーブルと標準の CSS を使用して、Web サイトのログイン領域を作成しました。私の問題は、IEがそこに何かを追加しているため、FirefoxやChromeとはレンダリングが異なることです。

input[type=text"] を固定幅にして、クロムと同じようにテーブルに表示したいと思っています。

上が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>

EDIT 2番目の固定幅は、テキストではなく type="password" だったため、修正されたことがわかりました。今問題になっているのはパディングだけです。

更新 だから何が起こったのかわからない。CSS などは何も変更しませんでしたが、JQuery 1.7.1 をページに追加し、ページで ctrl+F5 を実行すると、突然修正されました。

4

1 に答える 1

0

どのバージョンの IE を使用していますか? IE の一部のバージョンでは、HTML が正しく表示されないことがわかっています。特に、パディング/マージンと配置が正しく表示されません。実際、IE (特に古いバージョン) の問題は非常に苛立たしく、時間がかかるため、あるオーストラリアの e コマース企業は、IE7 のサポートに関連する追加費用をカバーするために IE7 のユーザーに追加料金を請求しています!

すでに述べたように、CSS のリセットはこの問題に対処する 1 つの方法です。

この問題に対処するもう 1 つの方法は、テンプレートに 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 に答える