2011-08-08 16 views
22

私はCSS3でちょっと遊ぼうとしており、純粋にCSS3からNetscapeのロゴを作成してトレーニングしています。ここでオーバーフロー:Firefoxでは非表示になりますが、Chromeでは非表示になります。どうして?

がリンクである:

http://alonbt.com/css3/netscape/

事がある:Firefoxでは、すべてがうまく見えますが、Chromeで何かがうまくいきません。私はこれがoverflow:hiddenだと仮定しています - Firefoxでは動作しますが、Chromeはうまく表示されません。

何か問題がありますか?私はここに、この問題に詳細まし

+2

うまくやった!あなたが言ったように、 'overflow:hidden 'を持つ' border-radius'には問題があるようです。 Webkitはそれらの2つの組み合わせを理解していないように見え、それを長方形のように扱います。 Webkitにバグレポートを提出することを検討する必要があります。 http://www.webkit.org/quality/reporting.html – mqchen

+2

素晴らしいもの!遭遇しているバグは、http://code.google.com/p/chromium/issues/detail?id=60005です。これは同様の問題かもしれません:http://stackoverflow.com/questions/5736503/how-to-make-css3rounded-corners-hide-overflow-in-chrome-operaポスターが解決できました。 「whiteCircle」と「blackCircle」に「position:relative」を置き換えて、代わりにマイナスマージンを動かすと気分が良くなると気付きましたが、探している効果をどのように達成するかについてのより良い考えがあるでしょう。 –

+0

ねえ、いい仕事。あなたが好きなら、私の[Github project](https://github.com/thomas4g/CSS-Art)をフォークしてコレクションに追加してください。 :) ...それは私のどれよりもずっといいです。 –

答えて

2

:特にhttp://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html

は、問題があまりにもSafariで現れhttps://bugs.webkit.org/show_bug.cgi?id=50072

に見舞われています。

+0

私は非常にWebkitでこのような問題を見ることに驚いていると言わざるを得ない。 – jffgrdnr

+0

いくつかのリンクをドロップするだけではなく、その答えに詳細を追加するとよいでしょう。 – Pavlo

0

相対位置指定を使用しない場合、この問題を回避することができます。代わりに 'position:absolute' CSSプロパティを削除し、代わりにマイナスのマージンを使用してください(例: 'margin:-204px 0 0 -475px;'など)。

しかし、あなたは何らかの形で商品の注文を補う必要があります(あなたはもはやZ-インデックスを支配していませんが、それが必要です)。

0

私はWindowsコンピュータでChromeで同じ問題を抱えていましたが、divのimgとオーバーフロー:divで非表示になっていました。 Macではすべてうまくいっていたが、Windows Chromeはオーバーフローを無視した:hidden。私の解決策:-webkit-transform:scale(1); img(子供)に。

関連する問題