2010-06-29 4 views
1

이것은 Internet Explorer에서만 발생합니다. 중간 테이블이라고 표시된 표를이 HTML에 배치하면 상위 표의 정렬이 엉망이되어 첫 번째 TD의 너비 = "250"이 무시됩니다. (선택 상자는 페이지 왼쪽에서 250 픽셀부터 시작해야하지만 그렇지 않습니다 - 중간 테이블이라는 표를 제거하고 정렬이 제대로 작동합니다 이유가 무엇입니까?IE에서이 테이블 형식의 문제점은 무엇입니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<title>asdf</title> 
</head> 
<body> 
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1"> 
<tr style="height: 50px;"> 
    <td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td> 
    <td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf: </span><select class="form_select_"><option value="asdf">asdf</option></select></td> 
</tr> 
<tr id="row_container" align="left" valign="top"> 
    <td colspan="2"> 
<!-- middle table --> 
    <table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td style="width: 250px;" align="left" valign="top" id="nav_container"></td> 
    <td style="width: 25px;" align="left" valign="top"></td> 
    <td id="dat_container" style="width:1000px;" align="left"></td> 
    </tr> 
    </table> 
    </td> 
</tr> 
<tr style="height: 50px;"> 
    <td></td> 
    <td></td> 
</tr> 
</table> 
</body> 
</html> 

답변

2

1000 + 250 +> 1250 25

당신의 중간 테이블

+0

그래도 문제가 해결되지 않습니다. – user318747

+1

width = "1000" 을 두 번째 td (top-bg.gif-background가있는 배경)에 추가하면 이번에는 –

+0

과 같은 것을 기억합니다. 모든 테이블이 아니라면 IE는 폭 매개 변수를 무시합니다. 첫 번째 행의 셀에 있습니다. 틀릴 수도 있지만 확실하지는 않습니다. –

3

W3C Validator에 따르면, 당신의 XHTML 여섯 오류가 너무 넓습니다.보다 구체적으로는, 무시 가져옵니다 width="250" 속성이 유효하지 않습니다. 주요 문제 잘못된 태그는 브라우저가 작업 영역을 사용해야하므로 더 이상 일관된 크로스 브라우저 렌더링을 얻지 못한다는 것입니다. ounds. 이것을 먼저 고치십시오. 일반적으로 레이아웃은 CSS를 통해 이루어져야합니다.

+0

이러한 오류를 모두 수정해도 문제가 해결되지 않습니다. – user318747

3

웹 사이트 레이아웃에 대해 매우 오래된 방법을 사용하고 있습니다. 테이블을 사용하여 사실상 표 형식이 아닌 웹 사이트에있는 모든 것을 배치하면 큰 번호 없음입니다. 표준 준수 CSS 및 HTML (DIV, Span 등)을 사용하여 사이트를 구성해야합니다. 테이블은 각 브라우저마다 다르게 취급되므로 일관되고 기능적이며 유지 관리가 쉬운 레이아웃을 얻는 것이 매우 어려울 수 있습니다.

나는 그것을 말하고 싶지만 실제로는 테이블을 사용하여 현재 문제를 해결하는 데 도움을 줄 수는 없습니다. 내 유일한 대답은 DIV 태그와 CSS를 사용하여 다시 시작하고 표준 준수 레이아웃 인 즐거움을 즐기는 것입니다. (CSS를 모두 설정하기 위해 style = ""속성을 사용하지 말고 적절한 스타일 시트를 사용하십시오.)

1

IE는 매우 리터럴 될 수 있기 때문에 짧은 답변입니다. 더 폭이 지정되지 않은 한 당신의 1 행에

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
<tr> 
    <td width="250" style="background-color:blue;">a1</td> 
    <td style="background-color:green;" >a</td> 
</tr> 
<tr> 
    <td colspan="2" style="background-color:red;"> 
     <table> 
     <tr> 
     <td width="1000">c2</td> 
     </tr> 
     </table> 
    </td> 
</tr> 

</table> 
</body> 
</html> 

공지 사항 당신의 두번째 TD :

먼저 단순화 문제는 이것이다 : 여기 말했다는 주위의 작품입니다. 당신이 폭이 수해야하는지 알고 있다면 다음과 같이이 문제를 해결할 수 있습니다 : 나는 다른 사람이 말한 것과 동의

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
<tr> 
    <td width="250" style="background-color:blue;">a1</td> 
    <td width="750" style="background-color:green;" >a</td> 
</tr> 
<tr> 
    <td colspan="2" style="background-color:red;"> 
     <table> 
     <tr> 
     <td width="1000">c2</td> 
     </tr> 
     </table> 
    </td> 
</tr> 

</table> 
</body> 
</html> 

, 즉 CSS 길을 가야하는 것입니다,하지만 그건 질문이 아니었다. 잘하면이 도움이됩니다.

관련 문제