边界半径出血

Question

我想给

赋予边框半径，其中所有 都有一个图像有背景，但图像不断超出边界 -半径。这是为什么？

Answer 1

要在所有浏览器中解决此问题，您应该使用：

-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;

我在此处找到了答案

Answer 2

添加：

-webkit-background-clip: padding-box;

在 Webkit 中修复此问题。

Answer 3

我遇到了 bootstrap panel 边框或背景渗入 HTML header 的问题。 引导面板上方的元素。 元素具有 class="page-header" 并包含在 div 元素中，其 class="col -lg-12”。这里和其他地方的答案对我不起作用。

有效的方法是将其添加到 panels CSS 类中：

overflow:hidden;

我从 获得了指示这里来自卡罗尔的回答。

编辑：

这给我带来了另一个问题。我在面板中有下拉控件，并且 overflow:hidden; 导致下拉菜单被切断并且未完全显示。

下拉菜单包含在具有 Bootstrap col-lg 类的 div 元素中。我将 style="position:inherit" 添加到包含下拉列表的那些 div 元素中，这解决了问题。

我找到了该问题的解决方案 这里。

其他选项：

我在正在出血的 div 标签之前添加了 3 或 4 个
元素，并且解决了出血问题，而无需任何不良副作用。