圓角不能切斷在WebKit瀏覽器的內容，如果位置：相對

圓角不能切斷在WebKit瀏覽器（例如，瀏覽器）如果position:relative;圓角不能切斷在WebKit瀏覽器的內容，如果位置：相對

見本demo內容。

HTML：

<div class="outer"> 
    <div class="inner"> 
    </div> 
<div>

CSS：

.outer { 
    background:yellow; 
    border:solid 1px black; 
    position:relative;/* Setting this means rounded corners don't cut off content! */ 
    overflow:hidden; 

    -moz-border-radius: 12px; 
    border-radius: 12px; 
} 
.inner { 
    background:red; 
    height:50px; 
}

任何人都知道一個修復？ Thanks-

來源

2011-05-26 Yarin

它的正常工作使用我的FF4。你使用的是什麼瀏覽器？此外，你可以嘗試添加像div的2px填充。 – 2011-05-26 20:17:40

@ Bryce-正如我在問題中所述，這對於Webkit（Chrome）而不是Gecko（FF4）瀏覽器是個問題。 – Yarin 2011-05-27 13:17:46

這是webkit中的一個錯誤。你可以在http://bugs.webkit.com上提交一張票嗎？ – 2011-05-29 17:43:24

http://jsfiddle.net/USd5s/

恨添加額外的DOM元素，但一個簡單的包裝修復了這個權利了。你不必使用我的元素或CSS方法的選擇，跨度和合格的CSS只是我的口味。或者什麼都可以。

來源

2011-07-30 03:10:12 Fresheyeball

這是有效的，但正如所指出的，這僅僅是一個webkit bug的黑客。進一步的測試表明，當對下面的元素執行CSS轉換時，這種技術將失敗。只有在轉換完成之後溢出：再次正常隱藏工作。 – Joshua 2012-06-19 17:05:53

@Joshua你能幫我一把嗎？ – Fresheyeball 2012-06-19 18:09:30

@ Fresheyeball-謝謝，一個簡單的黑客 - 抱歉的延遲... – Yarin 2013-01-20 01:51:18

你可以給內部的div相同的邊界半徑：http://jsfiddle.net/eCsA3/8/

<div class="outer"> 
    <div class="inner"> 
    </div> 
<div> 

<style type="text/css"> 
.outer { 
    background:yellow; 
    border:solid 1px black; 
    position:relative;/* Setting this means rounded corners don't cut off content! */ 
    overflow:hidden; 

    -moz-border-radius: 12px; 
    border-radius: 12px; 
} 
.inner { 
    background:red; 
    height:50px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
} 
</style>

來源

2011-05-26 20:18:28 Flauwekeul

@ Flauwekeul-這可以在這個簡單的例子中工作，但並不能解決外部div有更復雜內容的問題，而這些內容不一定坐在角落裏。 – Yarin 2011-05-27 13:08:01

我相信，我讀的地方，你必須將容器夾的東西，以解決這個問題。我不太確定，但我認爲這是一條路。

來源

2011-07-13 08:00:44 Vasseurth

作爲Paul Said，webkit中的Bug，但您仍然可以在內部div上使用邊距來解決它。

來源

2011-07-17 13:41:21 defau1t

-1

嘗試以此爲CSS爲.inner：

.inner { 
    background: red; 
    height: 50px; 
    position: absolute; 
    top: 1px; 
    left: 12px; 
    right: 12px; 
    bottom: 1px; 
}

您將需要調整bottom和top獲得高度正確。如果保持不變，課程只有一個像素的高度。此方法將左右邊距設置爲邊框半徑，因此邊緣上不顯示任何內容。

另外，如果你周圍有.outer純色背景，你可以做一個這樣的形象： Rounded Corner PNG 其中內（圖像中的方格區域）的面積是透明的，在禁區外的背景色。然後使用邊框圖像或絕對定位將其放在角落的位置。給它高z-index。當您滾動時，內容將隱藏在角落的填充部分下方。

來源

2011-08-01 13:31:40

我把你的解決方案[JSFiddle]（http://jsfiddle.net/eCsA3/113/），它根本不工作。在Safari中，它將整個div摺疊成水平線。 – Sparky 2011-08-02 16:27:21

這就是爲什麼你應該添加'底部'作爲一個屬性（如我所說）。我會更新我的答案，使其更清晰。 – 2011-08-04 20:01:05

只需將內部設置爲與外部相同的邊界半徑即可。

.inner { 
    -moz-border-radius: inherit; 
    -webkit-border-radius: inherit; 
    border-radius: inherit; 
}

哦，別忘了webkit人。：]

來源

2011-08-04 22:00:47 k4t434sis

我有同樣的問題在一個項目中，並在CSS一點點變化解決它

，而不是設置位置到相對我將它設置爲繼承：

.outer { 
    background:yellow; 
    border: solid 1px black; 
    position: inherit; 
    overflow:hidden; 
    border-radius: 12px; 
}

而這解決了完美的問題。

來源

2012-05-22 09:49:26 Federico

不是一個解決方案，繼承將只使用父元素的任何位置 – Yarin 2013-01-20 01:57:53

你可以迫使它在三維渲染：

-webkit-transform: translateZ(0); 
-moz-transform: translateZ(0); 
transform: translateZ(0);

來源

2014-08-11 13:41:43 KIm

最乾淨的工作解決方案。 – 2015-02-09 16:24:08

請參閱本link。這解決了你的問題。

#wrapper { 
 
    margin-top:250px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 100px; 
 
    overflow: hidden; 
 
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ 
 
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ 
 
}

來源

2015-04-16 07:06:02 Remiel

圓角不能切斷在WebKit瀏覽器的內容，如果位置：相對

回答

相關問題