크롬과 파이어 폭스에서 CSS CSS로 폭이 넓어짐

Question

처음에는 CSS에 아직 익숙하지 않았기 때문에 나는 멍청한 짓을하지 않았 으면 좋겠다.

기본적으로 나는 Pure을 사용하여 제작하고 있으며 폭은 Firefox에서 의도 한대로 작동하지만 Google 크롬에서는 재생되고있는 디자인이 있습니다. 여기

내가 무슨 짓을했는지에 대한 링크입니다 : http://egf.me/Rushd/rushdtest.html 및 스크린 샷 :

• 파이어 폭스 : http://i.imgur.com/mn3GIbT.png
• 크롬 : http://i.imgur.com/44jLC6J.png

당신은 페이지의 소스를 살펴있는 경우, I 내 자신의 CSS에서 아무것도 변경하지 않았다. (확신하기 위해 모든 것을 주석으로 처리했다.) 그래서 나는 자신의 사이트가 Chrome에서 잘 렌더링되기 때문에 어떻게 든 순수한 잘못을 사용하고 있다고 생각한다.

또한 Chrome의 개발 도구를 사용하여 요소를 검사하면 서로 인접해야하는 div 요소의 너비가 부모의 너비보다 적음을 알 수 있습니다. 버퍼 나 패딩이없는 것 같습니다. 또한 수동으로 너비를 매우 약간 줄이면 Chrome이 모든 것을 마술로 수정하는 것으로 보입니다.

Answer 1

문제는 자식 div간에 공간이 렌더링된다는 것입니다. 문제는 마진도 패딩도 아닙니다. 실제로 HTML 코드에서 div 태그 사이의 공백으로 인해 발생합니다. 공백 및 문제없이 서로 직접 인접한 태그 해결할 수

장소) 실제로 매우 이상한

Example code

<!--whitespace in HTML = renders as a space between the divs--> 
    <div></div> 
<div></div> 
<!--no whitespace in HTML = renders edge to edge--> 
<div></div><div><div>