Question

我有一个包含一组字段集的表单。这些字段集将有条件地隐藏并显示在服务器端，因此我需要这些字段集从左到右从上到下流动。下面的代码实现了这一点，但是10px的保证金底部没有得到IE的尊重（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属性（详细了解here）

Answer 2

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

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

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

Fieldsets有一个自然显示：block，而不是内联，所以IE6 / 7让人心烦意乱。

尝试将内联块更改为“阻止”（如果您希望它们位于同一行，则为“内联”），并查看是否可以解决问题。

Answer 3

我认为IE喜欢搞乱内联块 - 如果你只是使用块怎么办？这应该可以解决问题。

Answer 4

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

利润不受IE的尊重

4 个答案: