DocType가 xhtml 1.0 엄격 할 때 왜 높이가 높이와 같지 않습니까?

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

  •  11-09-2019
  •  | 
  •  

문제 

<!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="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td align="right" colspan="5">
            <span class="validationInline">*</span> 
            <span class="hint">Required fields</span>
        </td>
    </tr>
    <tr>
        <td colspan="5" background="http://media.monster.com.hk/bgr_8.gif">
            <img src="/static/cleardot.gif" height="1" width="1" />
        </td>
    </tr>
</table>

</body>
</html>

여기에서 확인할 수 있습니다.http://maishudi.com/tt2.html

해당 부분을 삭제하면 정상이되기 때문에 DocType에 의해 발생한다는 것을 알고 있습니다.

http://maishudi.com/tt.html

그래서 뭐가 잘못 되었는가? doctype에서 어떻게 작동하게 할 수 있습니까?

도움이 되었습니까?

해결책

참고 : 이것은 아마도 브라우저에 따라 다릅니다.
지정되지 않은 경우 블록 레벨 요소 (TD, DIV 등)의 크기는 컨텐츠에 의해 채취 한 공간에 따라 필요에 따라 크게 큽니다. 지정된 경우 그에 따라 확장하려고합니다. 제외하고 콘텐츠가 더 크면 필요에 따라 확장됩니다.

예에서 셀에는 단일 라인의 크기를 취하는 단일 문자 (비 파괴 공간)가 포함되어 있습니다. 따라서 블록 요소는 최소 1 라인 높이가되어야합니다. 더 작은 크기를 가정 할 수 없습니다. 이것이 당신의 높이 선언이 무시 된 이유입니다.

이 스타일을 사용하고 싶을 수도 있습니다.

line-height: 1px;

이것은 라인 높이를 1px로 설정합니다. 라인 높이는 요소가 아니므로 위 규칙은 적용되지 않습니다.

다른 팁

이 규칙에 따라 스타일 블록을 추가하십시오 

td img {display: block;}

그리고 봐라 https://developer.mozilla.org/en/images ,_tables ,_and_mysterious_gaps 전체 설명을 위해.

배경은 TD 요소의 표준 속성이 아닙니다. 대신 사용 :

style="background: url(/path/to/image.png);"

당신의 1 픽셀 이미지는 이것이 단순히 테이블 셀이 나타나게하는 것이라고 가정합니까? 그렇다면 그것은 권고하는 방법이 아닙니다. 당신은 할 수 있습니다 :

table { empty-cells: show; }

CSS에서는 IE6이 그것을지지한다고 생각하지 않습니다. 더 많은 표준을 준수하는 방법은 비 분해 공간을 사용하는 것입니다.

<td>&nbsp;</td>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top