溢出：隱藏分隔符border-radius

我遇到了容器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上）。有誰知道爲什麼會發生這種情況，是否有解決辦法？

來源

2011-07-17 sumone4life

我知道爲什麼會發生這種情況。沒有'overflow：hidden'的解決方案雖然逃避了我 – cjds

我一直在使用半徑上的按鈕，有時!important;崩潰的邊緣半徑使用時，則除去!important導致規則集重新工作規則集...

（發現同時調整一些網站的CSS ）

來源

2012-12-25 02:56:38

他從來沒有說他的規則集崩潰了嗎？邊界有效，但它只是溢出問題 – cjds

如果你問爲什麼發生這種情況，答案很簡單。

大多數瀏覽器的邊框以這種方式工作。發現一個邊界矩形。在邊界矩形周圍繪製所需的半徑。

問題是瀏覽器在邊界矩形的邊上繪製邊框。

因此，從理論上講，元素四捨五入時可以突破矩形的邊界。

這是溢出。所以如果overflow:visible的邊緣可能不乾淨。

爲什麼overflow:hidden修復此

那麼它的簡單溢出：隱藏只是隱藏一個矩形範圍的邊界之外的任何內容。因此，這將清理你的邊界

來源

2012-12-25 03:53:20 cjds

溢出：隱藏分隔符border-radius

回答

相關問題