IE와 공백

Question

필자는 배열에서 정렬되지 않은 인라인리스트를 PHP가 생성하도록했습니다. 이러한 목록 항목 각각에 대해 텍스트 옆에 확인란이 있으므로 "white-space : nowrap"을 지정해야하며 구분하지 않아야합니다. 그러나 목록 항목 외부에 적용해서는 안되기 때문에 그렇지 않으면 목록이 정상적으로 줄 바꿈되어야합니다.

<ul> 
    <?php 
    foreach ($nonfiction as $nonficid => $nonficgenre) { 
     echo "<li><input type=\"checkbox\" name=\"genre[]\" value=\"$nonficgenre\""; 
     if (in_array($nonficgenre, $selectedgenres)) { 
      echo " checked=\"checked\""; 
     } 
     echo " /><span class=\"genrelabel\">$nonficgenre</span></li> "; 
    } 
    ?> 
</ul> 

그리고 내 CSS에서

는 (참고 : 전체 목록 클래스 "listdivs"의 사업부 인) :

.listdivs li { 
    display: inline; 
    white-space: nowrap; 
} 

이것은 주변에 목록을 감싸고있는 크롬과 파이어 폭스에서 잘 작동 적절한 휴식. 그러나 IE는 합법적 인 공백을 무시하고 전체 목록을 한 줄에 인쇄합니다. 어떻게 보상 할 수 있습니까?

Answer 1

스팬 arround 콘텐츠를 추가하려고합니다.

.listdivs li { 
    display: inline; 
    white-space: nowrap; 
} 
.listdivs li span { 
    white-space: nowrap; 
} 

<ul> 
    <?php 
    foreach ($nonfiction as $nonficid => $nonficgenre) { 
     echo "<li><span><input type=\"checkbox\" name=\"genre[]\" value=\"$nonficgenre\""; 
     if (in_array($nonficgenre, $selectedgenres)) { 
      echo " checked=\"checked\""; 
     } 
     echo " /><span class=\"genrelabel\">$nonficgenre</span></span></li> "; 
    } 
    ?> 
</ul> 

이 트릭은 jqueryui, yahooui 같은 일부 UI에 많이 사용됩니다에 extjs는