내 사이트가 다른 브라우저에서 잘 보이지 않는 이유는 무엇입니까?

Question

저는 현재 사이트를 개발 중이며 FireFox를 주요 테스트 영역으로 고려하고 있었지만 Chrome과 IE9에서 테스트 한 결과는 다릅니다. Chrome에서는 페이지를 열면 레이어 중 하나가 자리에 앉지 않지만 일단 새로 고침하면 원하는 위치에 정확하게 맞 춥니 다. 이상한? IE에서 div 중 하나 (왼쪽)는 왼쪽에 더 높은 여백을 가지고 다른 div에서 너무 멀어지며 글꼴이 다르므로 일부 단어가 더 커지고 테두리에 맞지 않습니다. 내 폐하를 모든 브라우저에서 잘 보이게하고 브라우저를 기본 테스트 영역으로 고려해야하는 가장 좋은 아이디어는 무엇입니까?

추신 : 내 질문에 사람들이 투표하는 이유는 무엇입니까? 우린 모두 배웠다.

Answer 1

첫째,

당신은/리셋을 사용하여 CSS에서 스크립트를 정상화해야한다. 좋은 것은 Eric Meyers's입니다.

스타일 시트 시작 부분에 이것을 포함하십시오.

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

Answer 2

코드를 보지 않고는 정확하게 말할 수 없지만 개발 중에는 모범 사례를 놓쳤습니다. IE 및 다른 브라우저 범위에서 개발하는 동안 측면을 확인해야합니다. 그러면 상승하는 동안 문제를 해결할 수 있습니다.

• 문서 유형을 확인하십시오.
• 재설정 된 요소
• IE 상자 모델 문제 식별.

Answer 3

모든 프로젝트를 시작하거나 일부 CSS 재설정을 사용하려면 상용구처럼 사용해야합니다.

그런 방식으로 브라우저 간의 차이 (패딩, 여백 등)를 수정할 수 있습니다.

에서

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
... 

더 : 장기에서 당신이 가장 중요한에서 테스트해야 브라우저 ... 약 http://meyerweb.com/eric/tools/css/reset/

(주 의해 주) 난 그냥 확인하기 위해 몇 가지 사소한 relevante 브라우저에서 테스트의 잘 작동합니다.