Internet Explorer 8의 CSS 문제 해결

Question

불행히도 IE 8과 호환되어야하는 웹 사이트를 만들고 있습니다. 적어도 HTML5가 작동하지 않는다는 것을 알고 있기 때문에 일부 변경 사항을 성공적으로 구현했습니다.

그러나 나는이 경우에해야 할 일을 찾아내는 데 어려움을 겪고 있습니다.

이 JSFiddle은 내 문제 코드를 간결하게 표현합니다. 원하는 출력물이 내 크롬 버전에서 작동합니다. http://jsfiddle.net/kjetilnordin/g6FGv/

표 안에 단일 행과 세 개의 셀이 있습니다. 3 개의 셀은 공간을 균등하게 분할하고 내용 크기를 고려하지 않습니다. 자, 세포를 보이지 않게하거나 다시 볼 수있게하는 토글 박스가 있습니다. 나머지 세포가 부모의 모든 공간을 차지하도록 1, 2 또는 3 개의 보이는 세포로 나누어주세요.

IE 8에서는 셀이 1/3 크기로 유지되고 왼쪽으로 이동하면 왼쪽 셀이 보이지 않게됩니다.

CSS 속성 중 하나가 지원되지 않았지만 모든 내용을 확인 했으므로 작동해야합니다.

여기에 따라 연주되지 않는 것은 무엇입니까? 해결책은 좋겠지 만 올바른 방향으로 조금 움직이면 감사할만한 것입니다.

코드 :

<table> 
    <tr> 
     <td class="foo"> 
      foo 
     </td> 
     <td class="bar"> 
      bar 
     </td> 
     <td class="foobar"> 
      foobar 
     </td> 
    </tr> 
</table> 

<input type="checkbox" class="togglebox" value="foo">toggle off foo</input></br> 
<input type="checkbox" class="togglebox" value="bar">toggle off bar</input></br> 
<input type="checkbox" class="togglebox" value="foobar">toggle off foobar</input></br> 

자바 스크립트 :

$('input:checkbox').live('change', function(){ 
    if($(this).is(':checked')){ 
     $("."+this.value).toggle(false); 
    } else { 
     $("."+this.value).toggle(true); 
    } 
}); 

CSS :

table{ 
    border: 1px solid black; 
    border-collapse: collapse; 
    width: 200px; 
    min-width: 200px; 
    max-width: 200px; 
    table-layout: fixed; 
} 

td{ 
    border: 1px solid black; 
    border-collapse: collapse; 
    width: 100%; 
    text-align: center; 
} 

Answer 1

는 사실, 소리가 나는 것처럼 미친, IE8이 기술적으로 권리입니다. Chrome은 예상치 못한 동작을 유지하기 위해 여기에 비표준입니다.

은 콘텐츠에 대한 변경을 포함하여 콘텐츠에 관계없이 표 레이아웃을 수정하는 것을 의미합니다. 이렇게하면 테이블을 더 빠르게 렌더링 할 수 있습니다.

불행히도 이것은 동일한 수의 열을 보장하고 토글 수에 따라 열 수를 가변 할 수있는 쉬운 방법이 없음을 의미합니다.

table-layout:fixed을 제거하고 JavaScript가로드시에 적절한 width 백분율을 계산하도록해야합니다.