가로로 쌓인 "블레이드"콘텐츠를 사용하는 사이트를 만들려고합니다. 이들을 포함하는 요소는 overflow-x: hidden으로 div 내에서 옆으로 이동되어 원하는 sidescrolling 효과를 만듭니다. 이것은 잘 작동하는 것 같습니다 : "블레이드"를 포함하는 요소는 display: table; width: 100%; table-layout: fixed으로 설정되고 각 블레이드는 다음과 같이 스타일이 지정됩니다. display: table-cell; width: 601px; border-right: 1px solid white; padding: 10px. 마지막으로 nav 요소의 너비는 621 픽셀이며 가로 채우기 또는 여백은 없습니다.Firefox와 IE는 디스플레이가있는 요소의 패딩 렌더링시 서로 동의합니다 (표 Chrome). 표 셀
모두 간단하지만 충분히 이상한 크로스 브라우저 버그가 나타납니다. Firefox와 IE9는 페이지 모양에 동의하지만 Chrome은 다른 의견을 가지고 있습니다. 나는 을 알아 냈습니다. 무엇을 크롬이하고 있습니다. 그러나 나는 알아낼 수 없었습니다. 이유는입니다.
doctype의 설정과 다른 모든 작업이 정상적으로 작동하는 것 같습니다. 배경색을 제외하고, 위의 규칙은 스타일 시트에서 정의한 것이며 인라인 스타일은 없습니다. 다음은 문제 동작을 설명하는 몇 가지 스크린 샷입니다.
다음은 파이어 폭스의 페이지입니다 - 원하는대로 탐색 표시 줄의 오른쪽 가장자리 콘텐츠 상자의 오른쪽 가장자리에 정렬합니다.
IE9에서 동일합니다. 크롬
border-box을 설정하지 않았으며 Chrome의 계산 된 규칙에서도 볼 수 없었습니다. 폭이 581px 인 반면 다른 두 브라우저에서는 601px라고 말합니다.
[참고 :. 나는 패딩 문제에 대한 다른 게시물이 있다고보고, 그러나 아무도 파이어 폭스와 IE9 동의없는 경우와 크롬은 뭔가 다른했다]
편집 여기 JSFiddle 링크입니다 : http://jsfiddle.net/aCeAw/
링크 또는 jsfiddle이 없으면 야생 추정 만 할 수 있습니다. – Rob
JSFiddle 링크가 추가되었습니다. 각 브라우저는 위의 스크린 샷과 같은 방식으로 렌더링합니다. – ehdv
현재 CSS 재설정을 사용하고 있습니까? –