溢出：隐藏分隔符border-radius

我遇到了容器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上）。有谁知道为什么会发生这种情况，是否有解决办法？

来源

2011-07-17 sumone4life

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

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

（发现同时调整一些网站的CSS ）

来源

2012-12-25 02:56:38

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

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

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

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

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

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

为什么overflow:hidden修复此

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

来源

2012-12-25 03:53:20 cjds

溢出：隐藏分隔符border-radius

回答

相关问题