边界半径不会影响内部元素

Question

我有一个布局,其中所有页面内容都在一个带圆角的框中.这包括页面标题等.我有一个div包含我的标题内容的元素,一个div包含页面主要内容的元素,以及一个div包含页脚的元素.我的问题是这样的:由于我的"标题"的边框div没有圆角,大的"容器" div似乎没有在顶部四舍五入.我已经调查过,并证明这只是"标题" div叠加在"容器"上div.我在这里有一个例子:http://jsfiddle.net/V98h7/.

我已经尝试将"标题"的边界四舍五入div到相同的范围,但这会在边框上创建一个小缺陷(它获得了自己的边框,"标题" div的背景颜色).出于绝望,我还尝试将容器的z-index设置为大数.那什么都没做.

我觉得这个问题应该有一个简单的解决方案.我不想要一个javascript修复.我更喜欢CSS,但LESS也可以.

Answer 1

这是小提琴 - http://jsfiddle.net/ashwyn/V98h7/2/

添加 -

#outer {
   overflow: hidden;
}

它会起作用.