CSS가 포함 된 IE 8 목록 만들기

CSS가 처음인데 IE8의 목록에이 문제가 발생했습니다. 왼쪽과 오른쪽이라는 두 개의 div가있는 여러 개의 li 요소가있는 정렬되지 않은 목록을 만듭니다.CSS가 포함 된 IE 8 목록 만들기

HTML 코드 -

<ul> 
     <li> 
      <div class="left"> 
       <p>ONE</p> 
      </div> 
      <div class="right"> 
       <p>TWO</p> 
      </div> 
     </li> 
     <li> 
      <div class="left"> 
       <p>THREE</p> 
      </div> 
      <div class="right"> 
       <p>FOUR</p> 
      </div> 
     </li> 
    </ul>

나는 기본적으로 두 개의 열이있는 목록을 만들려고합니다. 내 CSS - 위의 CSS와 HTML을 사용

ul { 
     list-style-type: none; 
     padding: 0px; 
     margin: 0px; 
    } 

    ul li { 
     height: 40px; 
     width: 800px; 
     border: 1px solid; 
    } 



ul li div.left, div.right { 
     display: inline-block; 
     *display: inline; 
     zoom: 1; 
    }

, 나는 높이의 두 개의 열 40px와 목록을 얻을. 파이어 폭스와 크롬에서, 나는 원했던 것처럼 보여 주지만, IE에서는 다른 이야기이다.

IE에서 동일한 목록을 볼 수 있지만 유일한 문제는 간격입니다. IE에서는 왼쪽과 오른쪽 div가 부모 li의 상단에 위치하는 반면 Chrome과 Firefox에서는 요소가 내가 원하는 부분에 중간에 앉아 있습니다.

IE에서 어떻게 발생합니까? IE에서는 내 div가 li 요소의 상단에 달라 붙지 않고 채워져 있습니다. 내 CSS에 다른 것을 추가해야합니까? 누군가가 도울 수 있다면, 좋을 것입니다.

감사합니다.

출처

2012-09-20 user1684636

FF와 IE는 Win과 동일하게 보입니다. IE 브라우저에서 호환 모드가 활성화되어 있는지 확인 했습니까? – hsalama

Windows도 사용하고 있지만 호환성 모드가 활성화되어 있는지 어떻게 확인합니까? – user1684636

IE에서 호환되는 문제의 주요 원인 인'quirks 모드 '를 사용 중일 수 있습니다. http://stackoverflow.com/questions/6529728/html5-doctype-putting-ie9-into-quirks-mode –

상자를 떠 다니고 li에 맞는 높이를 줄 수도 있습니다. 인라인 블록이 모든 브라우저/버전에서 예상대로 작동하지 않습니다.

ul li div.left, 
ul li div.right { 
    float: left; 
    height: 40px; 
    width: 400px; 
}

출처

2012-09-20 08:37:20 Andrew

CSS가 포함 된 IE 8 목록 만들기

답변

관련 문제