オーバーフロー：隠しブレークボーダー半径

Question

コンテナdiv、ボーダー半径、オーバーフローに問題があります。

（ハブスポット上の誰のために、次の質問は、コンテナのdivの外にフッターの内容を移動する方法です）

注：私は、CMSのテンプレート内で立ち往生していますし、HTMLの形式や内容を変更することはできません。

#container{ 
    -moz-border-radius: 15px !important; 
    -webkit-border-radius: 15px !important; 
    -khtml-border-radius: 15px !important; 
    border-radius: 15px !important; 
    overflow: hidden; 
} 

私はオーバーフローを変更した場合：：に隠されたそれは、以下が適用されるCSSは以下の通りですウェブサイト

<div id="container"> 
     <div id="header">...</div> 
     <div id="content">...</div> 
     <div id="footer">...</div> 
    </div> 

の一般的なレイアウトであるだけにCSS

に依存しなければなりませんオーバーフロー：境界線が表示されなくなります（少なくともChromeでは）。誰がなぜこのようなことが起こっているのか、周囲に道があるのか​​誰にも分かりますか？

Answer 1

いくつかのウェブサイトのCSSを微調整しながら、

が（見つけた...私は、ボタンの上に半径を使用している、そして時には!important;はその後!importantの除去、国境半径に使用され、再び動作するようにルールセットの原因となるルールセットをクラッシュ）

Answer 2

なぜこのようなことが起こるのかを聞いたら、答えは簡単です。

ほとんどのブラウザの枠線は、このように動作します。境界の矩形を発見する。境界矩形の周りに必要な半径を描画します。

問題は、ブラウザが境界矩形の端に境界線を描画することです。

理論的には、要素は丸められたときに矩形の境界を突破することができます。

これはオーバーフローです。したがって、overflow:visibleのエッジがきれいでない場合があります。隠されたばかり境界の矩形の範囲外のものを隠します：

はなぜoverflow:hidden修正この

まあそのシンプルなオーバーフローはありません。したがって、これはあなたの国境をきれいにするでしょう