IE 9에서 CSS 분석하기

Question

IE 9에 웹 개발자 메뉴에서 "검사"옵션을 선택하고 각 CSS 클래스를 적용 할 수있는 Firefox와 비슷한 기능을 수행 할 수 있는지 궁금합니다. 요소 내 페이지에. IE 9의 F12 기능에서 "보기"-> "클래스 및 ID 정보"를 선택할 수 있지만 CSS 세부 정보는 표시되지 않습니다.

내 문제는 내 사이트가 FF로보다 IE에서 완전히 다르게 보이고 디버깅하려고한다는 것입니다. 다른 제안은 인정 될 것입니다. 감사합니다. .

편집 1 :

특정 문제가 모든 내용이 중앙에 오도록 FF에서 나는 왼쪽과 위쪽 여백을 가지고있다. 그러나 IE에서는 모든 것이 정당화됩니다. 나는 페이지의 첫 번째 div를보기 시작하기로 결정했습니다. 왜냐하면 그것도 다르게 나타나기 때문입니다.
여러 div가 서로 중첩되어 있지만 범인을 찾은 것 같습니다. IE에서

는 div의 중 하나에 대한 CSS는 다음과 같습니다

#regionHeader .wrapper { 
    overflow:hidden; 
} 

.wrapper { 
    margin:0 auto; 
    min-width:320px; 
} 

.wrapper, .clearfix, #content { 
} 

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, figure, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    border:0 none; 
    margin:0; 
    padding:0; 
} 

공지 최대 폭 :

#regionHeader .wrapper { 
    overflow:hidden; 
} 
.wrapper { 
    margin:0 auto; 
    max-width:1140px; 
    min-width:801px; 
    width:auto; 
} 
.wrapper { 
    margin:0 auto; 
} 
.wrapper { 
    margin:0 auto; 
} 
.wrapper { 
    zoom:1; 
} 
.wrapper:after { 
    clear:both; 
} 
.wrapper:after { 
    display:table; 
} 
.wrapper:before { 
    display:table; 
} 

div { 
    -webkit-text-size-adjust:none; 
    border-bottom:0; 
    border-left:0; 
    border-right:0; 
    border-top:0; 
    margin:0; 
    padding-bottom:0; 
    padding-left:0; 
    padding-right:0; 
    padding-top:0; 
} 

그러나 FF에서 동일 다음 스타일이 1140px을; 익스플로러 대 FF는 최소 너비 만 가지고 있습니다. 그게 문제의 원인이 될까요? Unforunately, 이것은 내 코드가 아닙니다 ...

Answer 1

Firebuglite는 IE6 +로하게 호환이며, 여기에서 다운로드 할 수 있습니다 : 요소를 클릭, 도구 상자에서 포인터 버튼을 클릭

https://getfirebug.com/firebuglite

Answer 2

IE9 개발자 도구를 가져 오려면 F12를 누르십시오.

또는 도구 - F12 개발자 도구

Answer 3

F12 키를 눌러 너는 조사하고 싶어. 해당 요소의 CSS는 dom-window의 오른쪽에 있어야합니다. 그렇지 않은 경우 오른쪽 창 위의 "스타일"버튼을 클릭 할 수 있습니다.