Question

我在HTML页面中有一个表单，除IE之外的所有浏览器都很好用。我知道它有一些IE渲染fieldset标签的东西，我已经尝试使用psuedo div来破解它，但这不起作用。任何人都遇到过这个或有解决方法？这是一个小提琴：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中遇到的问题的屏幕截图 enter image description here

Answer 1

这似乎是IE 9中的一个奇怪的错误。为了规避它，在div元素之前添加一个空的<div></div>元素，即form。当你把表单放到一个前面有一些内容的真实页面上时，问题可能会自动消失，就像标题一样。

IE时不时会出现在文档最开始的表单或表单最开始出现的元素。如果您在IE 9上检查页面（使用F12），您可以看到问题仅出现在“标准模式”（！）中，而不是在怪异（兼容）模式下。风格设置很大程度上都会丢失。

Answer 2

外部字段集的用途是什么？它缺少传奇标签。你可以没有它（但需要重写你的CSS）。虽然根据我的经验，嵌套字段集在IE中不是问题，但除非所有字段集都有图例，否则不需要添加标记和样式复杂性。

下次你可以把你的代码放在一个小提琴中，以获得更快更准确的答案。

Answer 3

添加了这个CSS类，看看这是否是你想要实现的目标

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

更新了小提琴http://jsfiddle.net/9F2eB/

我知道这不是理想的“高度优化”的写作方式，但如果这是你想要产生的理想效果，那就采取想法并随之逃避。

IE字段集渲染

3 个答案: