1

我在 HTML 页面中有一个表单，在除 IE 之外的所有浏览器中都能正常工作。我知道它与 IE 渲染 fieldset 标记有关，并且我尝试使用伪 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 中遇到的问题的屏幕截图 在此处输入图像描述

4

3 回答 3

2

这似乎是 IE 9 中的一个奇怪错误。要绕过它，请添加一个空div元素，即<div></div>在form元素之前。当您将表单放到一个前面有一些内容（如标题）的真实页面上时，问题可能会自动消失。

IE 时不时地对出现在文档开头的表单或出现在表单开头的元素做一些奇怪的事情。如果您检查 IE 9 上的页面（使用 F12），您会看到问题仅出现在“标准模式”（！）中，而不出现在 quirks（兼容性）模式中。样式设置在很大程度上丢失了。

于 2012-12-04T21:57:25.613 回答
0

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

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

于 2012-12-04T21:12:26.513 回答
0

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

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

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

我知道这不是理想的“高度优化”的写作方式，但如果这是您想要产生的预期效果，请接受并逃避它。

于 2012-12-04T21:28:17.933 回答