css - 如何阻止父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

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

如果没有声明 DOCTYPE，Internet Explorer 显然默认为“怪癖”模式！

更多信息检查， CSS quirks mode

Answer 2

尝试给孩子以下风格：

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

Answer 3

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