Question

<style type="text/css">

    .parent 
    {
        width            : 200px;
        height           : 50px;
        background-color : #FFFFCC;
        overflow         : visible;
    }

    .child 
    {
         width            : 255px;
         height           : 30px;
         background-color : #CCCCFF;
    }

</style>

<div class="parent">
    <div class="child">Child Content</div>
</div>

它在firefox中工作正常，但在IE7中，父div使用子div进行扩展。反正有没有阻止IE7拉伸父div？对于某些设计约束，div无法定位。

Answer 1

只需在HTML开头添加<!DOCTYPE>即可解决问题。

如果没有声明DOCTYPE，Internet Explorer显然默认为'quirks'模式！

有关详细信息，请查看 CSS quirks mode

Answer 2

尝试给孩子以下风格：

.child 
    {
         width            : 255px;
         position         : relative;
         height           : 30px;
         background-color : #CCCCFF;
    }

Answer 3

您可能希望在父容器上将overflow:visible;更改为overflow:hidden;。不完全确定这是否是你想要的。

如何在IE7中阻止父div延伸

3 个答案: