鉻不尊重邊界橈骨兒童

我有一些麻煩讓Chrome尊重子元素的邊框半徑。鉻不尊重邊界橈骨兒童

這裏的設置：

<div class='wrapper'> 
    <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' /> 
</div>

如果包裝是一個定位元件（例如位置：相對）和具有邊界半徑，則邊界半徑將不會被施加到IMG內容。

它也不一定是圖像。任何滿足背景的內容。

下面是簡化示例頁面，顯示問題。在Safari，Mobile Safari，Firefox或IE瀏覽器中查看，圖像的角落將被剪切到圓角。在Chrome瀏覽器中，圖像溢出了角落（儘管溢出：隱藏的CSS）並且看起來很醜。

看一看： https://dl.dropbox.com/u/433436/no-rounding/index.html

問題：有一些解決方法這是不是太瘋了嗎？有誰知道爲什麼這會影響一個基於WebKit的瀏覽器而不是其他人？或許這即將在Chrome中更新？

來源

2012-09-19 isaiah

您需要刪除position: relative

如果您真的需要相對位置，那麼你就可以雙纏繞你的元素：

HTML：

<div class="outer"> 
    <div class="wrapper"> 
     <div class="inside"> 
     </div> 
    </div> 
</div>

CSS：

.outer { 
    position: relative; 
} 
.wrapper { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    border: 3px solid red; 
    border-radius: 20px; 
} 
.inside { 
    width: 100px; 
    height: 100px; 
    background-color: #333; 
}

http://jsfiddle.net/eprRj/

看到這些相關的問題：

來源

2012-09-20 04:15:44 Petah

嘗試給子元素一個border-radius一半給予父元素。

從這樣的回答：https://stackoverflow.com/a/5421789/187954

來源

2012-09-20 04:07:12

雖然這明顯解決了複雜用例的簡單情況下的問題，但這並不是真的可行。在我的具體情況下，子元素不是我無法修改的用戶內容。 – isaiah

在只需添加您必須根據邊框厚度調整半徑，並將其從小孩身上取下。我還會在舊版支持瀏覽器的前綴中添加-moz-等。

來源

2012-09-21 14:00:08

向父元素添加display: block;或display: inline-block;可以解決它。

來源

2016-04-13 15:13:58

鉻不尊重邊界橈骨兒童

回答

相關問題