内边距/外边距常见问题：如何解决？

Question

内边距/外边距常见问题：如何解决？

3

我了解这是一个在 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的示例），您会发现输入框继承了

容器的margin-left和padding-top。

实际上，如果我将.loc_main上的margin-left:30px;与padding-left:30px;交换，并将.loc_cerca上的padding-top:50px;与margin-top:50px;交换，这个问题就会消失。

这是一个常见的IE7 bug，但我想知道如何解决这些问题。有什么建议吗？还是我只需要记住将margin放在顶部/底部和padding放在左侧/右侧？

- markzzz

2

你应该考虑使用 http://code.google.com/p/ie7-js/。不确定它是否能解决你的具体问题，但它是一个非常有用的脚本。 - amal

有趣的脚本！但我想知道是否有其他方法来解决这个特定的问题！谢谢 - markzzz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

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

通过向.loc_cerca添加zoom: 1可以修复您特定的示例。

参见：http://jsfiddle.net/gC4gP/17/。