divでレンダリングされたコーナーが、より大きなdivレンダリングのバグやエラーになるためのポータルとして使用されましたか？

私は、コンテンツより意図的に小さいdivを持っています（私はスライディングトグルウィジェットを作っています）。私はコンテナの角を丸くしたい。 FireFoxでは意図したとおりにレンダリングされますが、ChromeとSafariの両方で、角の丸い部分と四角の部分の間の領域に内部コンテンツが表示されます。すべてのシナリオに適しているソリューションがないため、内側のコンテンツに角を丸くすることはできません（左にトグル、右にトグル、動く）。divでレンダリングされたコーナーが、より大きなdivレンダリングのバグやエラーになるためのポータルとして使用されましたか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
     <title>DIV test</title> 

     <style type="text/css"> 
      body { 
       font-size    : 3em; 
      } 
      #frame { 
       border     : thin solid black; 
       /* background: #a0a0ff; */ 
      } 
      #portal { 
       background    : none; 
       margin     : 20px; 
       display     : inline-block; 

       -moz-border-radius  : 29px; 
       -webkit-border-radius : 29px; 
       -khtml-border-radius : 29px; 
       border-radius   : 29px; 
       border     : thin solid black; 

       width     : 400px; 
       overflow    : hidden; 
       height     : 4em; 
       line-height    : 4em; 
      } 
      #inner { 
       position    : relative; 
       width     : 900px; 
       background    : #a0ffa0; 
       z-index     : -100; 
       margin-left    : -150px; 
      } 
     </style> 

    </head> 
    <body> 
     <div id="frame"> 
      <div id="portal"> 
       <div id="inner">Here are some partially visible words</div> 
      </div> 
     </div> 
    </body> 
</html>

が、これはWebKitのブラウザでレンダリングのバグですか、私は何か間違ったこととFirefoxで幸運取得しています：ここで私がこれまで持っている何ですか？

出典

2012-03-11 Chris

あなたのCSSフォーマットはかなり珍しいです。 :) – GEMI

バグかどうかわかりませんが、それはうんざりです。ただし、この修正プログラムを試してください： http://jsfiddle.net/tpe36/1/

ChromeとFirefoxで動作します。

HTML：

<div id="frame"> 
    <div id="portal"> 
     <div id="container">     
      <div id="inner">Here are some partially visible words</div> 
     </div> 
    </div> 
</div>

CSS：

#inner { 
    position    : relative; 
    width     : 900px; 
    z-index     : 1; 
    margin-left    : -150px; 
} 
#container { 
    background    : #a0ffa0; 
}

出典

2012-03-11 18:44:40 Alex

なぜ、違いが出てくるのか分かりませんが、確かにありがたくありがとうございます。指が交差すると、より複雑な実際のコードに変換されます。 – Chris

違いは、 '＃container'は'＃portal'と同じ幅です。 '＃inner'は背景色を持たないので、そのコーナーが丸められていないことはわかりません。 – Alex

もう少し考えた後、私はこれが翻訳されるとは思わない - 私が努力している効果は、親の上に余白を残して移動する内側のコンテンツ（3つの異なるスタイルのスパン）の色付けに非常に頼っている。移動しないコンテナのスタイリング（そして 'ポータル'のサイズにマッチする）は意図した効果を持たないでしょう。あなたは確かに提示された質問に答えている。 – Chris

divでレンダリングされたコーナーが、より大きなdivレンダリングのバグやエラーになるためのポータルとして使用されましたか？

答えて

関連する問題