IE (7)에서 잘못된 테이블 레이아웃

StackOverflow https://stackoverflow.com/questions/197266

문제

아래는 테이블 레이아웃이있는 간단한 HTML 코드입니다. FF에서 그것은 내가 생각하는 것처럼 보이고, IE7에서는 그렇지 않습니다. 내가 뭘 잘못하고 있죠?

그리고 어떻게 고칠 수 있습니까?

<!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>
도움이 되었습니까?

해결책

나는 당신이 중간 행의 최소 높이 (로우 스핑 된 셀 만 포함 된 것)와 인접 행의 확대 된 높이에 대해 불평하고, DIV 사이에 간격을 남기고 있다고 가정합니다.

즉, 행에 행에 행한 셀 만 포함되어있을 때 최적의 행 높이를 계산할 수 없습니다. 로우 스팬을 제거하기 위해 절대적으로 재회 할 수없는 일반적인 솔루션은 빈 셀을 포함하는 테이블의 한쪽에 1px '더미'열을 추가하는 것입니다.

그러나 그렇습니다. 이 예제와 같은 모든 고정 픽셀 레이아웃이라면, 각 DIV에 대한 절대 포지셔닝이 훨씬 쉬울 것입니다.

다른 비트 : CSS 너비/높이 값은 단위 (아마도 'PX')가 필요합니다. Valign/CellSpacing/etc. 테이블 레이아웃을 사용하는 경우에도 스타일 시트에서 더 쉽게 수행 할 수 있습니다. 표준 모드 Doctype는 더 나쁜 IE 버그를 방지 할 수 있습니다 (비록 CSS 관련이 아닌이 오래된 버그는 아니지만).

다른 팁

처음에는 CSS 값에 단위가 있어야합니다. width:190; 해야한다 width: 190px;

완전히 동의합니다. Blueprint CSS 또는 기타 CSS 프레임 워크를 살펴볼 수 있습니다.

첫눈에 IE7은 이러한 종류의 형식에 대한 지원이 약간 깨진 것처럼 보입니다. 처음에 나는 divs를 제거하고 TD에서 형식 (너비와 높이)을 직접 움직일 것을 제안했지만 시도해 보았지만 문제를 해결하지 못하는 것 같습니다.

나는 이것이 좋은 해결책이 아니라고 생각하지만, 로우 스팬 세포를 더 많은 세포로 교체 할 수 있습니까? 그러나 텍스트가 상부 셀의 크기보다 큰 경우이 솔루션은 실패합니다.

DocType (시스템 식별자가없는 4.01 Transitional (URL))의 선택은 IE에서 퀴크 모드를 트리거하여 다른 브라우저와 매우 일치하지 않습니다.

로 전환:

<!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">

(물론, 물론 확인 그러나 HTML 및 CSS (길이 값에서 누락 된 단위를 선택할 수 있음)).

당신은 확실히 CSS와 함께 가야합니다. 테이블은 레이아웃에 사용해서는 안됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top