Firefox의 간격 문제

Chrome과 비교했을 때 Firefox의 div간에 간격 문제가 계속 발생합니다. Firefox는 내부의 콘텐츠보다 더 큰 요소의 높이를 계산합니다.Firefox의 간격 문제

이미 CSS 재설정을 사용하고 있습니다.

는 box-model, float, display, margin, padding을 변경 시도 아무것도 어떤 결과를 얻을 수 없습니다. 파이어 폭스에서 볼

When viewed in Firefox

크롬에서 볼은 :

When viewed in Chrome

2014-09-01 James

어딘가에서 온라인으로 코드를 볼 수 있습니까? 또는 http://sslipse.net에서 CSS와 HTML을 복제 할 수 있습니까? – haxxxton

몇 가지 코드를 제발, jsfiddle.net에서 더 나은 –

중복 가능한 http://stackoverflow.com/questions/25760396/chrome-automatic-shift-of-web-elements –

당신은 카드 번호 라인 아래에이 사업부에 대한 폭을 설정해야합니다. 최대 290px로 설정하십시오.

<div class="pure-u-sm-1 pure-u-8-24 reason"></div>

2014-09-01 06:59:30

고정 폭을 설정하면 응답이 중단됩니다. 다른 방법? – James

최대 너비도 설정할 수 있습니다. –

width:inherit 여기에서 근무했습니다.

2014-09-01 08:39:12 James

선택한 그리드 시스템은 WebKit에 flexbox, Firefox 용으로 inline-block을 사용하며 블록간에 공백 문자가 완전히 제거되지 않았습니다. 당신이 웹킷 같이 파이어 폭스에서 동일한 디스플레이를 얻을 수 .pure-g에

display:flex; 
flex-flow:row wrap;

를 추가 할 수 있도록 파이어 폭스의 현재 버전은,도 인 flexbox (접두어가)를 지원합니다.

또한이 격자 시스템은 -0.43em과 같은 마법 상수를 사용합니다 (널리 사용되는 글꼴에서는 공백 문자의 너비가 아니라 같음). 그런 일에 의지하지 않는 것이 낫습니다. 그런 '어두운 마법'이없는 다른 그리드 시스템을 사용해보십시오.

2014-09-01 08:56:49

아마도이 예제가 도움이 될 수 있습니다. http://jsfiddle.net/XeVFP/5/ 이전 버전의 브라우저에서만 '마법'을 사용하고, @ 지원하는 브라우저에서는 'flexbox'를 사용합니다. –

답변