保证金未被IE所尊重

问题描述：

我有一组表单，具有一组字段集。这些字段集将有条件地隐藏并显示在服务器端，因此我需要这些字段集从左到右从上到下流动。下面的代码实现了这一点，但10px的margin-bottom没有被IE（IE7测试）所尊崇。保证金未被IE所尊重

我看了一些文章，建议这与边缘崩溃，如果你不添加;不添加填充，但我试过这个，同样的事情发生。如何在2行字段集之间创建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>

答

对于IE 6和7，

display: inline; 
zoom: 1;

一个块级元素上相当于inline-block因为zoom触发IE的hasLayout属性（进一步了解它here）

答

我认为IE喜欢搞砸了inline-block的 - 如果你只是使用块？这应该解决问题。

没有。不包装然后。每个元素都在一个新行中。 – 2009-07-29 08:36:41

答

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

在IE 6和7内联块仅在具有一个自然的显示元件的工作原理。

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

字段集具有自然显示：块，而不是内联，所以IE6/7越来越不高兴。

尝试将内嵌块更改为'block'（或'inline'，如果您希望它们在同一行上）并查看是否解决了问题。

答

如果从改变显示内联块到内联，然后它在IE7和FF3中工作正常。

保证金未被IE所尊重

相关推荐