Css Div不会留在父母Div

Question

我有一个1000px宽的div。在div内部是另一个4000px宽的div。 代码看起来像这样

JS Fiddle

HTML

 <div id="parent_div">
       <div id="child_div">
       </div>
    </div>

CSS

#parent_div{
 position:relative;
 height:500px;
 width:1000px;
 overflow:hidden;
}
#child_div{
 position:relative;
 height:500px;
 width:4000px;
}

现在此代码适用于Chrome和Safari，在Safari中的Chrome中看起来像这样 黑盒子是父母Div - 红盒子是Child Div

这就是我期望代码工作的方式，但在FireFox中代码看起来像这样

子div被推出其父级。为什么这样做？我怎么能阻止它这样做？

Answer 1

在子div中使用“position：absolute”而不是relative

Answer 2

只需删除overflow：hidden;

#parent_div{
 position:relative;
 height:500px;
 width:1000px;
}