如何阻止父div在IE7中拉伸

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，Internet Explorer 显然默认为“怪异”模式！

如需进一步信息检查，
CSS 怪异模式

Answer 2

尝试给孩子以下的风格：

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

Answer 3

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