Chrome/Safari와 Firefox의 기묘한 차이점

Question

최근 테스트를 위해 코딩하는 동안 Chrome을 사용하여 주로 웹 사이트 (http://willryan.us/typefun01)를 디자인했습니다. 나는 최근에 특정 섹션의 끝에서 일어나는 이상한 일들이 있음을 발견했다. (역사 이후의 차이, 스타일이 해부학에 겹쳐 있음).

내 스타일 시트에 CSS 리셋이 있는데 (이 작업과 관련이 있는지 확실하지 않음), 원인을 파악할 수 없으며 사이트를 볼 때와 같이 보이게하는 방법 크롬

Answer 1

의 역사 이후의 격차는 때문이다 :

div#content > div { 
    overflow: hidden; /* or auto */ 
} 

또한 내부 요소의 큰 상단과 하단 여백을 움직일 수 :

#historyWide { 
    margin: 250px 80px 75px; 
} 

그것은으로 해결 될 수있다 자식 div의 padding에 #content의 자식 div가 있습니다. 자식 div가 모두 포함하는 한 아무 것도 작동하지 않습니다.

브라우저가 불완전한 레이아웃을 처리하는 다양한 방법을보고 있습니다.

Answer 2

History 후에 간격을 피하려면 여백 대신 historyWide에서 채우기를 사용하고 싶을 것입니다. 여백은 멀리 패딩을하는 동안 멀리 요소를 가져옵니다.

해부학에서는 "스타일"을 수정하기 위해 "top"속성을 사용하고 있지만 부모는 요소를 이동하지만 상위 요소는 요소. 요소 들간의 관계를 유지해야한다면 "위쪽"보다 마진 및 패딩 작업을하는 것이 좋습니다.

마지막으로 #stylesMono와 같이 마진이있는 위치 요소를 찾습니다. 나는 당신이 단락과 함께 수직 위치를 유지하고 거기에서 "p"의 범위에서 수레, 여백 및 패딩을 사용하여 더 잘 작업 할 수 있다고 생각합니다.