레이아웃에 엠을 사용하면 여러 브라우저에서 불일치가 발생합니다

나는 탄성 레이아웃을 사용하여 사이트를 만들려고합니다. 나는 에릭 메이어 (Eric Meyer)의 CSS 재설정을 사용했으며 body {font-size:62.5%}을 내 스타일 시트에 사용했다.레이아웃에 엠을 사용하면 여러 브라우저에서 불일치가 발생합니다

body {font-family:Arial, Helvetica, sans-serif; 
color:#000; 
margin:auto;} 

'id'other {background-color:color1;} 

'id'footer {background-color:color2;}

; {URL() 고정 노 반복 상단 중앙 bacgroound} :

편집은 여기 내 HTML 구조와 CSS

<html> <head> </head> <body> <div id="container"> <div id="gallery"> </div> <div id="other"> </div> </div> <div id="footer"> </div> </body> </html>

`HTML입니다 보시다시피, body의 고정 너비를 설정하면 #other 및에 대해 background 0은 고정 된 상태로 유지됩니다. 그래서 width을 100%으로 설정하고 margin: 0 8em 0 8em을 사용하여 갤러리를 중심에두고 #other 및 #footer의 내용을 중심으로 처리하려고했습니다.

내가 달성하고자하는 레이아웃은 기본적으로 사진 갤러리가 포함 된 1 열 레이아웃입니다. 전체 갤러리는 페이지 중앙에 위치해야합니다. 난 정의에 대한 em 사용하고 다른 브라우저에서 다른 결과가 발생합니다. 갤러리가 한 브라우저에 집중되면 다른 브라우저는 다른 결과를 표시합니다. Firefox, Chrome 및 IE9를 사용해 보았습니다.

em을 측정 단위로 사용하여 동일한 레이아웃을 만들 수있는 방법이 있습니까? 또는 고정 레이아웃을 사용하고 em 대신 px을 사용해야합니까?

출처

2011-12-30 tayeed

아무런 언급없이 진행되는 것을 정확히 말할 수는 거의 없습니다. 가능한 경우 링크를 제공하십시오. –

em 또는 percentanges를 유지하십시오. Theydowork.

그러나 센터링에 사용하면 문제의 일부일 수 있습니다. 센터링 예를 들어, auto으로 수행해야합니다

div.page { 
    margin: 0 auto; 
    width: 925px; 
}

출처

2011-12-30 15:23:15

센터링이 제대로 작동하려면 요소의 너비를 지정해야합니다. – rahool

@rahool 좋은 지적. 업데이트를 참조하십시오. –

귀하의 불일치 것들의 조합이다. body {font-size: 62.5%}을 정의하면 기본 글꼴 크기 설정의 62.5 % (사용자가 제어 할 수 있고 글꼴 당 가변적 인 글꼴)의 글꼴을 표시하도록 브라우저에 지시합니다. 그런 다음 CSS 캐스 캐 이드에서 나중에 em을 사용하면 방금 정의한 폰트의 크기에 따라 배율을 적용합니다 (배율을 정의하는 것이 더 어렵습니다 : http://webdesign.about.com/od/fonts/qt/em-origins.htm 참조). 따라서 14px으로 설정된 브라우저 글꼴은 2em에 이론적으로는 17.5px (8.75 * 2) 일 수있는 8.75px (14 * .625)이됩니다 (설명을 위해). 브라우저에 기본 16px 글꼴이 있으면 두 숫자는 10px이고 이론적으로는 20px이됩니다.

따라서, CSS의 종속 하부 em 단위 값을 표준화하는 데 유용한 px 값과 body 태그 (표준 웹 폰트 있거나, 아마도 @font-face 의해)에 보편적으로 인식 폰트를 em 단위를 사용하여 설정 불일치에 도움.

"너비가 고정 된"컨테이너를 사용하는 경우 Jason McCreary의 답변이 좋지만 "여백 크기를 수정하려면"px 또는 em 단위를 설정하는 현재 아이디어는 센터링에 적합합니다.

출처

2011-12-30 15:47:40 ScottS

가변 글꼴에 대한 좋은 점. 그러나 OP는 리셋 스타일 시트를 사용하여 메모했습니다. 그래서 당신이 묘사하는 것은 최소한의 영향을 미쳐야합니다. –

@Jason McCreary -하지만 재설정 스타일 목록에 본문 글꼴이 백분율로 설정된 경우 (OP가 언급 된대로) 사용자 (브라우저)는 초기 글꼴 크기에 따라 달라 지므로 나중에 큰 영향을 줄 수 있습니다 크기 조정. – ScottS

레이아웃에 엠을 사용하면 여러 브라우저에서 불일치가 발생합니다

답변

관련 문제