IE不兑现保证金

Question

我有一个带有一组字段集的表单。 这些字段集将有条件地隐藏并显示在服务器端，因此我需要这些字段集从左到右从上到下流动。 下面的代码实现了此目的，但是IE无法使用10px的空白边距（仅对IE7进行了测试）。

我读了一些文章，建议如果不这样做，这与页边距缩小有关；不添加填充，但是我尝试过此操作，并且发生了相同的事情。 如何在两行字段集之间创建10px的空格？

<html>
<head>
    <style>
        fieldset {
            display: inline-block;
            width: 30%;
            height:90px;
            vertical-align: top;
            border: 1px solid black;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
    </form>
</body>

Answer 1

对于IE 6和7，

display: inline;
zoom: 1;

在块级元素上等效于inline-block因为zoom触发IE的hasLayout属性（ 在此处了解更多信息）

Answer 2

来自： http : //www.quirksmode.org/css/display.html

在IE 6和7中，内联块仅适用于自然显示的元素：内联。

Firefox 2及更低版本不支持此值。 您可以使用-moz-inline-box，但请注意，它与inline-block不同，并且在某些情况下可能无法按预期工作。

字段集的显示很自然：阻止，而不是内联，因此IE6 / 7变得不高兴。

尝试将inline-block更改为“ block”（如果希望它们在同一行，则改为“ inline”），看看是否可以解决问题。

Answer 3

我认为IE喜欢破坏inline-block-如果仅使用block怎么办？ 那应该解决问题。

Answer 4

如果将显示从行内块更改为行内，则在IE7和FF3中可以正常工作。