오버플로 : 숨김; 내용 너비는 유지하지만 내용은 숨김 : Chrome

이 h re e 그런데 BFC 레이아웃이 흥미 롭긴하지만 재미있는 질문이 생겼습니다. (One, Two, Three)오버플로 : 숨김; 내용 너비는 유지하지만 내용은 숨김 : Chrome

This fiddle는, 단지 크롬에서 나는 데 문제를 보여줍니다 여전히 0 픽셀의 폭 값과 '내용'분류 사업부의 폭 치수를 시행 숨겨진 내용입니다.

이 레이아웃은 분명히 시행 콘텐츠 치수를 볼 수 있습니다 경우 작동하지 않을 아코디언 스타일의 메뉴 ...의 기초가 : P

왜 크롬이 동작 방법을, 어쩌면 내가 뭔가를 놓친 BFC 설명? 해결책은 최고 일 것입니다.

2011-09-20 danjah

Chrome이 올바르게 작동한다고 알 수 있습니다. 콘텐츠 클래스에 너비를 0px로 설정하고 있습니다. 오버플로 속성은 텍스트 콘텐츠가 경계 (0 픽셀 너비) 밖에 표시되지 않게하려는 것입니다. 5px 너비로 설정하면 'CONTENT'에 'C'부분이 표시됩니다. 그리고 5px는 너비입니다. 어느 것이 옳은가. 권리? – Marshall

[for] (http://stackoverflow.com/questions/4727083/overflowhidden-not-working-as-expected-in-google-chrome) [your] (http://stackoverflow.com/questions/6425460/chrome - and-overflowhidden-issue) [편의상] (http://stackoverflow.com/questions/6128139/can-overflowhidden-affect-layout) (미안하지만, 1900+ 해상도의 문자 하나를 클릭하려고하면 그래서 성가신) –

@ 마샬 사실 나는 크롬이 잘못하고 있다고 생각합니다. 'overflow : hidden '은'0px' 콘텐츠의 너비보다 더 큰 너비를 제공합니다. 그렇다면 나는 그런 식으로 의지하지 않을 것이다. –

정말 괴로운 버그!

추가 조사가 필요하지만 원래 너비가 .content 인 경우 동일한 음수 여백을 추가 할 수 있습니다 : http://jsfiddle.net/kizu/cpA3V/7/ - 원래 너비를 보완합니다. 아코디언을 애니메이션화해야하는 경우 width과 함께 margin을 애니메이션으로하면됩니다.

출처

2011-09-27 21:28:39 kizu

이

.slide { 
    float:left; 
    width:25px; /* width added here (same width of '.handle') */ 
}

예에보십시오 : 당신이 .content 1 x 1 픽셀의 폭을 줄 경우 JSfiddle

출처

2011-09-27 05:31:54 Sanooj

, 그때 제대로 동작합니다. 무슨 일이 일어나는지 설명 할 수는 없지만 너비 대신 display: none을 사용하여이 문제를 해결할 수 있습니다.

출처

2011-09-27 08:02:02

오버플로 : 숨김; 내용 너비는 유지하지만 내용은 숨김 : Chrome

답변

관련 문제