내 반응 형 레이아웃이 왜 깨졌습니까?

Question

다음 페이지가 있습니다. http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/

브라우저 크기를 조정해도 Chrome에서 멋지게 보이지만 모든 것이 훌륭합니다. 그러나 Firefox에서는 열이 서로 겹치고 이미지의 크기가 조정되지 않습니다.

기본 그리드 클래스는 .c-1 (너비가 작은 열) 및 .c-2 (두 개의 .c-1 열 너비)입니다. 무슨 일이 내 코드 에서이 문제를 일으키는거야? 나는 또한에 대해 다음 코드를 사용하고

.c-1 { 
width: 288px; 
float: left; 
margin-left: 28px; 
display: block; 
} 

.c-2 { 
width: 604px; 
float: left; 
margin-left: 28px; 
display: block; 
} 

.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; } 

: 빠른 참조를 들어

, 나는 내 그리드 CSS3 box-sizing: border-box을 사용하고, 여기 내이 .c-1과가 .c-2 클래스의 코드입니다 응답 이미지 : 지금 대부분의 부분에 대한 반응의 이미지를 해결 한 듯했습니다 확인

img { 
border: 0; 
-ms-interpolation-mode: bicubic; 
vertical-align: middle; 
max-width: 100%; 
height: auto; 
margin-bottom: 1.875em; 
} 

편집 할 수 있습니다. .active의 클래스 이름에 너비 값이 누락되었지만 블로그 섹션에 여전히 문제가 있습니다. 해당 페이지 (.c-1과 .c-2 인라인을 함께 사용)에 동일한 레이아웃이 사용되었지만이 섹션은 서로 겹치는 것처럼 보입니다 ... 홀수!

Answer 1

좋아, Firefox가 이러한 요소의 폭이 지정되지 않은 경우 요소 폭을 계산하는 것이 좋지 않은 것 같습니다. 왜 응답 이미지가 작동하지 않는지 설명합니다. 최대 너비로 설정된 이미지에는 너비가 설정된 컨테이너가 있어야하며 그렇지 않으면 이미지의 크기가 조정되지 않습니다.

CSS에서 너비가 지정되지 않은 경우 브라우저에서 100 % 너비로 요소를 기본값으로 설정했다고 생각하십니까?

어쨌든 이제는 모두 고쳐졌습니다. 래퍼 사람들에게 너비를 두세요!