레이아웃 문제 - Chrome 및 Firefox에서 다름

알아낼 수 없습니다. CSS를 기반으로 올바른 스타일은 무엇입니까? 각각의 'lorem'은 파이어 폭스에서 보여지는대로 자체 줄에 정렬해야합니까? 또는 크롬처럼 분할? 어떻게하면 두 브라우저가 똑같이 보이도록 수정할 수 있습니까? 여기 레이아웃 문제 - Chrome 및 Firefox에서 다름

은 위의 파이어 폭스와 같은 모양 나는 현재

<body> 
     <header>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</header> 
     <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</section> 
     <article>article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</article> 
     <aside>aside Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</aside> 
     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</footer> 
    </body>

http://jsfiddle.net/nKHkg/

body { 
    width: 960px; 
    margin: 100px auto; 
    text-align: center; 
} 
header { 
    margin: 5px; 
    padding: 20px; 
} 
section { 
    margin: 5px; 
    padding: 100px; 
} 
article { 
    float: left; 
    margin: 5px; 
    padding: 20px; 
} 
aside { 
    float: right; 
    margin: 0 5px; 
    padding: 20px; 
} 
footer { 
    margin: 5px; 
    padding: 5px; 
}

이 무엇

크롬에서 옆으로 기사와는 두 개의 열과 모습으로 나누어 져 고르지 않은.

출처

2014-03-28 Charles

지금 margin이 float, display 및 clear:both

차이를 참조하여 적절하게 컨테이너를 설정해야합니다 사이트 전체 섹션을 만들 그래서 때 ... 문제는 무엇인가? – sbeliv01

어쩌면 .... 왜 기사가 제쳐두고 나뉘어져 있니? – Si8

필자는 기사에서 무엇이 잘못되었는지 파악하기 위해 머리카락을 잡아 당겨서 파이어 폭스에서보기로 결정했습니다. 어느 것이 정확하며 두 브라우저에서 레이아웃을 동일하게 보이게하려면 어떻게해야합니까? – Charles

좋은 사이트 아키텍처를 적용하기 만하면됩니다. 당신이 당신의 FIDDLE

출처

2014-03-28 19:47:24 LOTUSMS

대부분의 수레가 서로 겹치지 않는가? – Charles

예, 플로트를 지 웁니다. [지우기] (http://www.w3schools.com/cssref/pr_class_clear.asp) – LOTUSMS

도움을 주셔서 감사합니다! – Charles

레이아웃 문제 - Chrome 및 Firefox에서 다름

답변

관련 문제