HTML 테이블 열 높이; IE가 아닌 Firefox에서 작동합니다

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

문제

Firefox3/Opera/Safari에서 잘 표시되지만 IE7에는 잘 표시되는 HTML이 있습니다. 스 니펫은 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%">

      <tr>

        <td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
        </td>

        <td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>

      </tr>

      <!-- This row doesnt fill the vertical space on IE7 //-->
      <tr>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
      </tr>

    </table>
    </body>

두 번째 행은 첫 번째 행 중간 열 (rowspan = "2"를 알림)으로 생성 된 수직 공간을 올바르게 채우지 않습니다. 대신 첫 번째 행 1과 3 열은 높이를 37로 설정하더라도 확장됩니다. 아래 이미지는 IE7 및 Firefox3에서 무슨 일이 일어나는지 보여줍니다 ...

alt text

편집 : Code Snippit에 HTML Doc 유형을 추가했습니다. 스크린 샷을 추가했습니다.

감사합니다. 감사합니다 :)

도움이 되었습니까?

해결책

이렇게 시도하면 어떻게해야합니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%" border='1'>

      <tr>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td>asdf</td></tr></table>
        </td>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

      </tr>



    </table>
    </body>

다른 팁

정답은 다음과 같습니다. 테이블을 사용하여 페이지를 레이아웃하지 마십시오.

기술적 인 대답은 다음과 같습니다. 테이블 셀이해야 할 일을하고 있습니다. 즉, 사용하는 코드 구조에 문제를 해결할 수 없습니다.

해킹 대답은 다음과 같습니다. 왼쪽과 오른쪽에 셀이 정확히 37px 높이가 되려면 왼쪽 및 오른쪽 셀에 2 개의 중첩 테이블을 추가해야합니다.

왜 그런 일이 일어나고 있는지 잘 모르겠습니다. 어떤 레이아웃을 달성하려고합니까? 실제로 테이블이어야합니까? 테이블이있는 페이지를 레이아웃해서는 안되며 실제 표 형 데이터에만 사용해야합니다.

divs 사용을 고려해 보셨습니까?

a 유효성 검사기 그리고 나는 당신이 조금 더 가까워 질 것이라고 확신합니다.

실제로 - 당신이보고있는 것은 IE의 정상적인 행동입니다 : 메인 테이블에 Border = "1"을 추가하면 조금 더 명확하게 일어나는 일을 보여줍니다.

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