IE/Chrome 및 Firefox/Opera에서 표 셀과 테두리가 다르게 표시됨

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

  •  22-08-2019
  •  | 
  •  

문제

몇 시간의 좌절 끝에 나는 마침내 대답을 찾기 위해 인터넷을 찾았습니다.다음과 같은 매우 간단한 코드를 상상해 보십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AARRRRRRGH</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
            </tr>
        </table>
    </body>
</html>

이제 이것은 매우 간단해 보입니다. 6px 테두리가 있는 너비 100px, 높이 100px의 테이블 셀을 만듭니다.보기에는 간단하지만 브라우저마다 다르게 보입니다.IE8 및 Google 크롬에서 표 셀은 112 x 112픽셀입니다(따라서 내부는 100px, 외부는 6px).Firefox 3 및 Opera에서 테이블은 112 x 100픽셀입니다. 따라서 어떤 이유로 테두리가 테이블 너비에 추가되지만 테이블 높이에는 추가되지 않습니다.

진지하게, 무엇을 제공합니까?그리고 이 렌더링을 각 브라우저에서 동일하게 만들 수 있는 방법은 무엇입니까(그리고 div를 사용할 수 없으며 이 경우 테이블을 사용해야 합니다).

도움이 되었습니까?

해결책

진지하게, 무엇을 제공합니까?

예 ... 테이블 셀 높이와 수직 테두리는 CSS 2.1 사양에서 실제로 잘못 정의되어 있습니다. 그들이 어떻게 상호 작용하는지 완전히 설명하는 것은 없으며 표준 블록 모델은 그것을 다루지 않습니다. 17.6.1 섹션의 그림은 너비의 정의가 높이를 다루지 않는다는 것을 보여줍니다.

fwiw 나는 Mozilla/Opera의 해석이 어떤 의미가 있다고 생각하지 않지만, 그것이 잘못되었다고 말할 수는 없습니다.

각 브라우저 에서이 렌더링을 동일하게 만들 수있는 방법 (이 경우 DIV를 사용할 수 없습니다.이 경우 테이블을 사용해야합니다).

테이블 내부의 div는 어떻습니까?

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

이제 '100px'가 언급하는 측정이 분명합니다. 이것은 나를 위해 작동합니다.

다른 팁

다른 doctypes를 사용해 보셨습니까? 나는 행운을 빕니다 :

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

나는 그것을 조금 어지럽혔고, IE7과 Firefox 2에서 나에게 동일하게 보이도록 만드는 몇 가지 사항이 있습니다.내가 해야 할 일은 다음 두 가지였습니다.

가) 추가하다 display:block;테이블 셀의 스타일(Firefox가 IE와 동일한 방식으로 셀 높이를 렌더링하도록 함)

b) 셀에 ​​줄바꿈 없는 공백을 추가했습니다(그렇지 않으면 IE는 테두리를 표시하지 않았습니다).

IE8이나 Firefox 3이 로드되어 있지 않지만 시도해 볼 수 있습니다.디스플레이를 차단으로 변경하면 부작용이 있는지 확실하지 않지만 문제가 해결됩니다.

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