this page을 보면 임의의 내용으로 3 개의 상자 (div # 3BlockOnTop)와 긴 상자 (div # squeeze)가 표시됩니다. 3 개의 상자 위와 아래의 파란색 간격은 동일한 크기 (약 30px) 여야합니다. 하지만 파이어 폭스에서는 3 박스의 갭이 더 넓다. 왜냐하면 몇 가지 이상한 이유는 아래 엘리먼트의 위쪽 여백에 영향을 받기 때문이다.여백이 Firefox의 다른 객체에 영향을 미침
Firebug에서 div # squeeze의 margin-top으로 노는 경우 위의 3 상자 위치가 어떻게 바뀌는 지 확인할 수 있습니다. 뭐가 잘못 되었 니? CSS에는 CSS의 합법적 인 속성이 포함되어 있습니다.
가 끝나기 전에 <div class="clear"></div> 있습니다 .. .. -webkit-padding for chrome를 사용하여 시도하고 파이어 폭스에 대한 -moz-pdding와 패딩을 제거 생각 태그는 div#threeBlockOnTop입니다.
이 끝 태그 뒤에 있어야합니다.
사용 성능
-webkit-transform:translate3d(-30px,0, 0);
-moz-transform:translate3d(-30px,0, 0);
transform:translate3d(-30px,0, 0);
이하지 않습니다 affct 다른 개체
각 브라우저가 자신의 리셋 스타일 및 표준 패딩을 가지고 모든 브라우저 를 재설정하는 것을 잊지 말아, 마진 CSS에서 tramsform3d , 상자 크기 ... 시도해보십시오. 브라우저 별 CSS 관련
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
그것은 내가
'-webkit'이 파이어 폭스 브라우저에서 작동하지 않습니다. 당신의 대답을 확인하십시오. –
div # squeeze { -webkit-transform : translate3d (0,30px, 0); -moz-transform : translate3d (0,30px, 0); 변형 : translate3d (0,30px, 0); 여백 - 하단 : 30px; }' – Watchduck
(WTH? 코멘트에 코드 블록을 쓸 수 없습니까?) 마지막 코멘트에 게시 한 내용은 현재 Crome을 제외한 모든 브라우저에서 작동합니다. 실제 질문은 : 그 페이지에 무슨 문제가 있습니까? 정상적인 CSS는 작동하지 않습니다. 그것은 상자들 사이에 간격이 있어야하는 상자들입니다. 분명히 구식 CSS에 대한 직업. – Watchduck
안녕하세요 mate2code 내가 무슨 일인지 모르겠지만 내 대답은 당신의 문제에 대한 해결책을 만약 당신이 그것을 thx otherweise 우리가 해결책을 찾을 수 있도록 다시 설명해 주시기 바랍니다 좋은 것입니다 –