2011-07-17 39 views
2

我遇到了容器div,边界半径和溢出问题。溢出:隐藏分隔符border-radius

(有关hubspot人,下面的问题就是如何页脚内容移动div容器外)

注:我坚持一个CMS模板中,不能更改HTML的格式或内容。它必须完全依赖于CSS

以下是该网站

<div id="container"> 
     <div id="header">...</div> 
     <div id="content">...</div> 
     <div id="footer">...</div> 
    </div> 

的CSS所应用的总体布局如下:

#container{ 
    -moz-border-radius: 15px !important; 
    -webkit-border-radius: 15px !important; 
    -khtml-border-radius: 15px !important; 
    border-radius: 15px !important; 
    overflow: hidden; 
} 

如果我改变溢出:隐藏溢出:可见边框消失(至少在Chrome上)。有谁知道为什么会发生这种情况,是否有解决办法?

+0

我知道为什么会发生这种情况。没有'overflow:hidden'的解决方案虽然逃避了我 – cjds

回答

0

我一直在使用半径上的按钮,有时!important;崩溃的边缘半径使用时,则除去!important导致规则集重新工作规则集...

(发现同时调整一些网站的CSS )

+0

他从来没有说他的规则集崩溃了吗?边界有效,但它只是溢出问题 – cjds

1

如果你问为什么发生这种情况,答案很简单。

大多数浏览器的边框以这种方式工作。发现一个边界矩形。在边界矩形周围绘制所需的半径。

问题是浏览器在边界矩形的边上绘制边框。

因此,从理论上讲,元素四舍五入时可以突破矩形的边界。

这是溢出。所以如果overflow:visible的边缘可能不干净。

为什么overflow:hidden修复此

那么它的简单溢出:隐藏只是隐藏一个矩形范围的边界之外的任何内容。因此,这将清理你的边界