我一直在嘗試與CSS3玩一下，併爲純粹的CSS3培訓建立一個Netscape標誌。溢出：隱藏在Firefox中工作，但不在Chrome中。爲什麼？
這裏是鏈接：
http://alonbt.com/css3/netscape/
的事情是：在Firefox一切看起來很好，但在Chrome中不順心的事。我認爲這是我的overflow:hidden - 在Firefox中它可以工作，但Chrome似乎並沒有很好地呈現它。
任何建議回合可能是什麼問題？
我已經在這裏詳細介紹這個問題：http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
特別是，你被https://bugs.webkit.org/show_bug.cgi?id=50072
擊中問題的Safari也顯示出來。
如果您不使用相對定位，則可以解決此問題。嘗試擺脫'position：absolute'CSS屬性並使用負邊距（例如，在您的情況下，如：'margin：-204px 0 0 -475px;'）。
但請注意，您必須以某種方式補償項目排序（您不再控制z-index，但您需要它）。
我在Windows計算機上的Chrome中遇到了同樣的問題，在div中有img，溢出：隱藏在div上。在Mac上，一切都很好，但Windows Chrome忽略了溢出：隱藏。我的解決方案：-webkit-transform：scale（1）;在img（孩子）上。
很好地完成！如你所說，它似乎可能是'border-radius'帶'overflow：hidden'的問題。似乎webkit不理解這兩個組合，並將其視爲矩形。您應該考慮向webkit提交錯誤報告。 http://www.webkit.org/quality/reporting.html – mqchen
好東西！也許您遇到的錯誤是：http://code.google.com/p/chromium/issues/detail?id=60005。這可能是一個類似的問題：這是海報能夠解決的問題：http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera。我注意到在'whiteCircle'和'blackCircle'上放置'position：relative'並將它們移動到負邊界反而效果更好，但是您可能已經更好地瞭解如何實現所需效果。 –
嘿，很好的工作。如果你喜歡，請分叉我的[Github項目]（https://github.com/thomas4g/CSS-Art）並將其添加到集合中。 :) ......它比我的任何一個都好。 –