CSS 样式表——IE 6/7 错误答案

【问题标题】：CSS Styling Forms -- IE 6/7 bugCSS 样式表——IE 6/7 错误
【发布时间】：2009-05-06 18:10:31
【问题描述】：

我正在使用表单开发一个网站，不幸的是，其中一个目标浏览器是 IE 6 和 7。我遇到了 CSS 和 IE 对样式化表单元素的呈现问题。

我已经写了一个测试用例，它就是这样（也可以在http://xistence.osnn.net/testcases/ie67fieldset/在线获得）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>IE [6|7] Wha?</title>
    <style type="text/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, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }

    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }

    body {
        line-height: 1;
        color: black;
        background: white;
    }

    #req fieldset {
        border: 0;
        border-top: 1px solid #000;
        padding: 0em 1em 0em 1em;
    }

    #req legend + label {
        margin-top: 0.5em;
    }

    #req legend {
        font-size: 1.2em;
    }

    #req label {
        display: block;
        background: none;
    }

    #req input, #req textarea {
        position: relative;
        display: block;
        left: 200px;
        top: -1em;
        margin-bottom: -0.3em;
    }

    #req input[type="text"], #req textarea {
        width: 300px;
    }

    #req textarea {
        height: 3.6em;
    }

    #req input[type="text"], #req textarea {
        border: 1px solid #0a0;
    }

    #req label.required + input[type="text"], #req label.required + textarea {
        border: 1px solid #a00;
    }

    #req input[type="submit"] {
        position: relative;
        top: 0;
        margin: 0;
        left: 200px;
        margin-top: 0.5em;
    }

    #req input[type="hidden"] {
        display: none;
    }
    </style>
</head>
<body>
<form id="req">
    <fieldset>
        <legend>Contact Information</legend>
        <label for="name" class="required">Name: </label> <input type="text" id="name" name="name"></input>
        <label for="phone" class="required">Phone Number: </label> <input type="text" id="phone" name="phone"></input>
        <label for="email">Email: </label> <input type="text" id="email" name="email"></input>
    </fieldset>
    <fieldset>
        <legend>Personal Info</legend>
        <label for="sports">Sports:</label> <input type="text" id="sports" name="sports"></input>
        <label for="spentonline">Hours spent online: </label> <input type="text" id="spentonline" name="spentonline"></input>
        <label for="moreinfo">Tell us about yourself: </label> <textarea id="moreinfo" name="moreinfo"></textarea>
    </fieldset>
    <fieldset>
        <input type="submit" value="Submit" />
    </fieldset>
</form>
</body>
</html>

我还拍了两张屏幕截图，一张是 IE 7，一张是 IE 8，IE 7 和 IE 6 同意这种样式，所以我没有费心拍摄 IE 6 的屏幕截图。

IE [6|7]：

IE 8：

以前有人见过这个错误吗？我哪里做错了？我必须删除什么才能使其在 IE 6/7 中工作而无需通过我的输入框有额外的行。当边框顶部在字段集上消失时，多余的行会被删除，但这不是解决方案，因为这样做会删除整个视觉分离。

它是固定的。 textarea 和 input[type="text"] 上的 margin-bottom 导致 IE 6/7 出现渲染错误。删除了这些，一切都很好。我想我可以处理页面上元素之间的额外空间！

【问题讨论】：

标签： css xhtml internet-explorer-7 rendering internet-explorer-6

【解决方案1】：

我看到你使用

input[type="submit"]

我怀疑 IE6 是否支持这一点...您可能希望在所有字段上放置类以区分不同类型的输入。

编辑：

margin-bottom: -0.3em;

您当前使用的负边距通常会导致 IE 出现问题，因此应将其删除

【讨论】：

这不是必需的，我正在使用 Dean Edwards 优秀的 IE7-js 项目将 IE [6|7] 修复到 IE 8 级别，但这并不能解决显示边框的字段集问题在接下来的几个元素上向上。
嗯...好的。仔细检查它是否不会导致问题。您应该为每个字段集设置不同的边框，以便准确查看重复的内容。我还看到一些可能导致 IE6 问题的负边距。除此之外，我没有想法......该死的 IE6
字段集的上边框在重复，当您提到负边距时，它让我想起了以前的问题。删除了边距底部，一切都很好！把它放在一个新的答案中，我会接受它:-)。