緣半徑出血

Question

我想為<nav>賦予邊界半徑，其中所有<a>都有一個圖像有背景，但圖像一直在邊界半徑之外。 這是為什么？

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邊框或背景出血到bootstrap panel上方的HTML標題<h> element遇到問題。 <h>元素具有class="page-header"並且包含在class="col-lg-12"的div元素中。 這里和其他地方的答案對我不起作用。

有效的是將其添加到panel的 CSS 類中：

overflow:hidden;

我從拿到的方向在這里從卡羅爾的答案。

編輯：

這給我帶來了另一個問題。 我在面板中有下拉控件和overflow:hidden; 導致下拉菜單被截斷，無法完全顯示。

下拉列表包含在帶有 Bootstrap col-lg類的div元素中。 我在包含下拉列表的div元素中添加了style="position: inherit"並解決了問題。

我在這里找到了該問題的解決方案。

附加選項：

我在流血的div標簽之前添加了 3 或 4 個<br/>元素，解決了流血問題而沒有任何不良副作用。