Firefox/Chrome과 비교하여 IE가 완전히 다른 청사진 사이트

Question

전 웹 사이트를 개발하기 위해 Blueprint CSS 프레임 워크를 사용하여 브라우저 간 호환성을 보장합니다 ... IE에서는 완전히 다릅니다.

사이트는 http://rtwilson.com/academic-new/이며 Firefox와 Chrome에서는 괜찮아 보이지만 완전히 IE에서 엉망입니다. 본체가 중앙에 있지 않고 이미지가 잘못된 위치에 있으며 텍스트가 다소 이상합니다.

아무도 어떻게 이것을 정렬 할 수 있습니까? 나는 Blueprint 외의 모든 점을 생각했다. 그것은 크로스 브라우저 (특히 IE) 호환성 문제를 분류 한 것이 었습니다. 올바른 IE 스타일 파일을 포함 시켰습니다 - 그래서 다른 아이디어?

Answer 1

청사진처럼 연결 것 (괜찮습니다 최근에 트위터 부트 스트랩으로 전환 했음에도 불구하고 - 사이트의 복잡성에 관계없이 마크 업이 정확하고 클래스가 올바르게 사용되는 한 모든 것을 처리합니다.

doctype (Michas가 언급했듯이 추가되어야 함) 이외에 시작 장소는 네비게이션 div가 들어있는 div에 "마지막"클래스를 추가하는 것입니다. 당신이 지금 쓰는 방법은 당신이 span-24를 가지고 있고, 또 다른 span-24를 포함하고 있습니다. 바로 그 다음에 span-15와 span-9가옵니다.

당신은이 :

<div class="span-24 last"> 
     <div class="span-24"> 
     ... 
     </div> 
     <div class="span-15"> 
       ... 
     </div> 
     <div class="span-9 last"> 
       ... 
     </div> 
    </div> 

당신 은는이 있어야합니다

<div class="span-24 last"> 
     <div class="span-24 last"> 
     ... 
     </div> 
     <div class="span-15"> 
       ... 
     </div> 
     <div class="span-9 last"> 
       ... 
     </div> 
    </div> 

가 지금 기록으로 가장 비트 IE는 알아낼 수없는 놀라게에서, 나는되지 않을 것 한 행에 48 개의 스팬이 없어야합니다.

Answer 2

나는 정직하고, 내가 청사진 CSS를 사용하지 것이다 - 당신과 같은 사이트 간단한 내가 단순히 IE에 대한 별도의 스타일 시트를 작성하고,이

<!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<![endif]-->