Question

我了解这是IE7上的经典问题：

<div class="loc_main">    
    <div class="loc_cerca">
        <div class="event_cerca_item">
            Field
        </div>

        <div class="event_cerca_item">
            <input type="text" class="loc_cerca_input_hidden" />
        </div>    
    </div>    
</div>

.loc_main
{
    margin-left:30px;    
}

.loc_cerca
{
    padding-top:50px;
}

.loc_cerca_input_hidden
{
    border:1px solid #6D6E70;
    width:500px;
}

.event_cerca_item
{
    width:500px;
    float:left;
}

如果您查看IE7（此处有fiddler示例），您会看到Input Box从div容器继承margin-left和padding-top。

事实上，如果我将margin-left:30px;与padding-left:30px;（.loc_main）和padding-top:50px;与margin-top:50px;（.loc_cerca）交换，消失。

这是一个常见的IE7错误，但我想知道如何解决这个问题。任何的想法？或者我只需要记住放margin on top/bottom和padding on left/right？

Answer 1

许多IE7错误/不一致是基于某些元素是否具有名为hasLayout的专有“属性”。提供它的常用方法是zoom: 1，因为除了将hasLayout设置为true之外，它没有（相关）副作用。

您可以通过将zoom: 1添加到.loc_cerca来修复您的具体示例。

请参阅： http://jsfiddle.net/gC4gP/17/

填充/边距的常见问题：我该如何解决？

1 个答案: