Question

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

Answer 1

如果您询问为什么会这样，答案很简单。

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

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

因此理论上，元素在圆角时可以突破矩形的边界。

这是溢出。因此，如果overflow:visible边缘可能不干净。

为什么overflow:hidden解决此问题

它的简单溢出：隐藏只是隐藏在边界矩形范围之外的任何东西。因此，这将清理你的边界

Answer 2

我一直在按钮上使用半径，有时!important;在边界半径上使用时会崩溃规则集，然后删除!important会导致规则集再次起作用...

（在调整某些网站的css时发现）

溢出：隐藏中断border-radius

2 个答案: