IE (7)의 테이블 레이아웃이 잘못되었습니다.

다음은 테이블 레이아웃이있는 간단한 html 코드입니다. FF로 보면 IE7에서는 과 같이 보일 것입니다. 내가 도대체 뭘 잘못하고있는 겁니까?

어떻게 해결할 수 있습니까?IE (7)의 테이블 레이아웃이 잘못되었습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <TITLE>test</TITLE> 
    </head> 
    <body> 
     <table id="MainTable" cellspacing="0" cellpadding="0" border="1"> 
     <tbody> 
      <tr> 
       <td colspan="4"> 
        <div style='width:769; height:192;'>192 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" valign="top"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
       <td rowspan="2" valign="top"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
       <td rowspan="2" valign="top"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top" rowspan="2"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
       <td valign="top" rowspan="2"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td valign="top" > 
        <div style='width:190; height:100;'>100 
        </div> 
       </td>       
      </tr> 
      <tr> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

출처

2008-10-13 Mafti

Strict doctype을 사용하면 다른 것처럼 보입니까? – Neall

이러한 다른 주석과 함께 최소한의 테스트 케이스 (예 : 행 수를 줄이는 것)를 생성하는 것이 좋습니다. a) 문제를보다 정확하게 식별 할 수 있습니다. b) 위에 게시 된 예제 코드의 크기를 줄일 수 있습니다. –

중간 행의 최소 높이 (rowspanned 셀만 포함)와 보정 할 인접 행의 높이를 불평하고 div 사이에 간격을 남기고 있다고 가정합니다.

행에 행이있는 셀만 들어있을 때 IE는 최적 행 높이를 계산할 수 없습니다. 평소에 rowspan을 없애기 위해 rejig 할 수없는 일반적인 해결책은 행의 높이를 설정하는 '높이'가있는 빈 셀을 포함하는 테이블의 한면에 1px '더미'열을 추가하는 것입니다.

그래, 이걸로 무엇을 할 계획 이냐에 따라, CSS 레이아웃이 더 적절할 수도 있습니다. 이 예제와 같이 실제로 모든 픽셀이 고정 픽셀 인 경우 각 div의 절대 위치 지정이 훨씬 쉬울 것입니다.

다른 비트 : CSS 너비/높이 값에는 단위 (아마도 'px')가 필요합니다. valign/cellspacing/etc. 테이블 레이아웃을 사용하는 경우에도 스타일 시트에서보다 쉽게 수행 할 수 있습니다. 표준 모드 DOCTYPE은 더 나쁜 IE 버그를 예방할 수있다. (예전의 비 CSS 관련이 아닌).

출처

2008-10-13 11:42:16 bobince

는 완전히 CSS 값이 예를 들어, 단위가 있어야합니다, 당신은 청사진 CSS 또는 도움 시작에 대한

출처

2008-10-13 11:22:48 roundcrisis

다른 CSS 프레임 워크를 살펴 가질 수 동의 width:190;은 이어야합니다.

출처

2008-10-13 11:23:23 Greg

예 문제의보다 구체적인 설명이 문제를 결정하는 데 도움이 될지라도 이것은 거의 문제의 원인입니다. –

처음에는 IE7이 이러한 종류의 서식을 지원하지 않는 것으로 보입니다. 처음에는 div를 없애고 형식 (너비와 높이)을 TD에 직접 옮기라고 제안하려고 시도했지만 문제를 해결하지 못했습니다.

이것은 좋은 해결책은 아니지만 행간 세포를 보이지 않는 경계선이있는 더 많은 셀로 대체 할 수 있습니까? 텍스트가 위쪽 셀 크기보다 큰 경우 그러나이 솔루션은 실패합니다.

출처

2008-10-13 11:42:15 rslite

-3

CSS를 꼭 사용해야합니다. 레이아웃을 위해 테이블을 사용해서는 안됩니다.

출처

2008-10-13 12:00:19 hmcclungiii

표 형식의 데이터를 배치하려면 표를 사용해야합니다. 두 개 이상의 열이나 행이 필요한 것은 표 형식의 데이터입니다 ... –

"두 개 이상의 열 또는 행을 필요로하는 것은 표 형식의 데이터입니다."이는 위험한 방식입니다. David! –

저는 테이블을 사용하여 2-3 열 레이아웃을 얻는 신자입니다. 나는 대부분의 사람들이 이것을 듣는 것을 좋아하지 않는다는 것을 잘 알고 있으며, 테이블에서 나의 위치를 잘못으로 잘못 판단하고 최악은 위험합니다. 내가 때때로 얻는 부정적인 피드백을 보면 테이블에 대한 증오가 얼마나 나쁜지를 알 수 있습니다. –

Doctype (시스템 식별자 (URL)이없는 4.01 Transitional)을 선택하면 IE의 Quirks 모드가 실행되어 다른 브라우저와 많이 일치하지 않게됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

또는 적어도 :

스위치에

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

(그리고, 물론, validate하지만 길이 값에 누락 된 단위를 선택할 것 HTML 및 CSS()).

출처

2008-10-13 12:31:48 Quentin

IE (7)의 테이블 레이아웃이 잘못되었습니다.

답변

관련 문제