나는 CSS3로 조금 놀아 보려고했으며, 훈련을 위해 CSS3에서 넷스케이프 로고 만 만들었다.오버플로 : Firefox에서는 숨김이 작동하지만 Chrome에서는 작동하지 않습니다. 왜?
http://alonbt.com/css3/netscape/
건은 다음과 같습니다 : 여기
링크 모두 잘 보이는 Firefox에서,하지만 크롬에 뭔가 잘못. 나는 이것이overflow:hidden이라고 생각합니다 - Firefox에서는 작동하지만 Chrome은 잘 렌더링하지 않는 것 같습니다.
어떤 제안이 문제입니까? 내가 여기에이 문제를 설명했습니다
: 특히 http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
는, 당신은 문제가 너무 사파리에 표시 https://bugs.webkit.org/show_bug.cgi?id=50072
에 의해 타격을 받고 있습니다.
상대 위치 지정을 사용하지 않는 경우이 문제를 해결할 수 있습니다. 'position : absolute'CSS 속성을 제거하고 대신 음수 여백을 사용하십시오 (예 : 'margin : -204px 0 0 -475px;'와 같은 경우).
그러나 항목 순서에 대해 어떻게 든 보상해야합니다 (더 이상 Z- 인덱스를 제어 할 수는 없지만 필요합니다).
Windows 컴퓨터에서 Chrome에서 동일한 문제가 발생했습니다. 즉, div에 img가 있고 div에 overflow : hidden이 있습니다. Mac에서는 모든 것이 정상적으로 보였지만 Windows Chrome은 오버플로를 무시했습니다. 숨김. 내 솔루션 : -webkit-transform : scale (1); img (아이)에.
멋지게 완료되었습니다. 그것은 당신이 말했듯이'overflow : hidden '이라는'border-radius'에 문제가있는 것 같습니다. 마치 웹킷이이 두 가지를 결합한 것을 이해하지 못하는 것처럼 보이고 직사각형 인 것처럼 취급합니다. 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-css3rounded-corners-hide-overflow-in-chrome-opera. 나는 'whiteCircle'과'blackCircle'에서'position : relative '를 꺼내서 음수 여백으로 옮기는 것이 효과적이지만, 여러분이 찾고있는 효과를 얻는 방법에 대해 더 잘 알고있을 것입니다. –
안녕, 잘 했어. 원한다면 내 [Github 프로젝트] (https://github.com/thomas4g/CSS-Art)를 포크하여 컬렉션에 추가하십시오. :) ... 그것은 내 것보다 훨씬 좋네요. –