1

私はHTMLページにフォームを持っており、IEを除くすべてのブラウザーでうまく機能します。IEがフィールドセットタグをレンダリングするものがあることはわかっています。psuedodivを使用してハッキングしようとしましたが、うまくいきませんでした。誰かがこれに遭遇したり、回避策を持っていますか？
ここにフィドルがあります：http：//jsfiddle.net/G9NSx/＆ ここにコードがあります：

        <form>
                    <fieldset>
                    <ol>
                        <li>
                            <label for="name">Name<em> *</em></label>
                            <input id="name" />
                        </li>
                        <li>
                            <label for="company">Company Name</label>
                            <input id="company" />
                        </li>
                        <li>
                            <label for="address">Address</label>
                            <input id="address" />
                        </li>
                        <li>
                            <label for="city">City</label>
                            <input id="city" />
                        </li>
                        <li>
                            <label for="state">State/Providence</label>
                            <input id="state" />
                        </li>
                        <li>
                            <label for="country">Country</label>
                            <input id="country" />
                        </li>
                        <li>
                            <label for="phone">Phone<em> *</em></label>
                            <input id="phone" />
                        </li>
                        <li>
                            <label for="fax">Fax</label>
                            <input id="fax" />
                        </li>
                        <li>
                            <label for="email">Email</label>
                            <input id="email" />
                        </li>
                        <li>
                            <fieldset class="regarding">
                                <legend>Regarding:<em> *</em></legend>
                                    <label><input type="radio" name="regarding" /> Capabilities</label>
                                    <label><input type="radio" name="regarding" /> Testing Information</label>
                                    <label><input type="radio" name="regarding" /> Business Relations</label>
                                    <label><input type="radio" name="regarding" /> Other</label>
                            </fieldset>
                        </li>
                        <li>
                            <label for="add-info">Additional Info.</label><br />
                            <textarea name="add-info"></TEXTAREA>
                        </li>
                    </ol>
                        <input type="submit" value="Submit"> <input type="reset" value="Reset"/><br />
                        <br />
                        <span class="bold">Required Fields<em> *</em></span>
                    </fieldset>
            </form>

CSS：

form {
    border: 1px solid #0066FF;
    /*background-image: url(../images/form-bg.jpg);*/
    background-color: #FFF;
}

form fieldset {
    margin: 10px;
    padding: 20px;
}

form legend {
    padding: 0 2px;
    font-weight: bold;
}

form label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
}

form fieldset ol {
    margin: 0;
    padding: 0;
}

form fieldset li {
    list-style: none;
    padding: 5px;
    margin: 0;
}

form fieldset li textarea {
    min-width: 300px;
    max-width: 500px;
    }

form fieldset fieldset {
    border: none;
    margin: 3px 0 0;
}

form fieldset fieldset legend {
    padding: 0 0 5px;
    font-weight: normal;
}

form fieldset fieldset label {
    display: block;
    width: auto;
}

form em {
    font-weight: bold;
    font-style: normal;
    color: #0066FF;
}

form label {
    width: 120px; /* Width of labels */
}

form fieldset fieldset label {
    margin-left: 123px; /* Width plus 3 (html space) */
}

form fieldset ol li fieldset.regarding {
    padding: 0px;
    }

これは私がIE9で抱えている問題のスクリーンショットです ここに画像の説明を入力してください

4

3 に答える 3

2

これはIE9の奇妙なバグの1つと思われます。これを回避するには、空のdiv要素を追加します。つまり<div></div>、要素の前に追加しformます。また、見出しなどのコンテンツが前にある実際のページにフォームを配置すると、問題はおそらく自動的に解消されます。

IEは、ドキュメントの最初に表示されるフォームや、フォームの最初に表示される要素を使用して、奇妙なことを行うことがあります。IE 9のページを（F12を使用して）調べると、問題は「標準モード」（！）でのみ表示され、癖（互換）モードでは表示されないことがわかります。そして、スタイル設定はほとんど失われます。

于 2012-12-04T21:57:25.613 に答える
0

このCSSクラスを追加しました。これが達成したいことかどうかを確認してください

fieldset, img, .regarding{
 border-width: 1px;
    border-style:solid;
    border-color:red;
}

フィドルを更新http://jsfiddle.net/9F2eB/

これが理想的な「高度に最適化された」書き方ではないことは知っていますが、これがあなたが生み出したい望ましい効果である場合は、考えを持って逃げてください。

于 2012-12-04T21:28:17.933 に答える
0

外側のフィールドセットの目的は何ですか？凡例タグがありません。あなたはそれなしで行うことができます（しかしそれからあなたのCSSを書き直す必要があります）。私の経験によれば、ネストされたフィールドセットはIEで問題になりませんが、すべてのフィールドセットに凡例がない限り、マークアップやスタイルの複雑さを追加する必要はありません。

次回は、コードをフィドルに入れて、より速く、より正確な答えを得ることができます。

于 2012-12-04T21:12:26.513 に答える