Google 크롬의 표 형식 (순수 HTML)

Question

이 코드에서 실수를 저지르고있는 부분을 이해하려고 노력하고 있지만 이해할 수 없습니다. Firefox와 IE에서는 잘 작동하지만 크롬에서는 내부 셀이 코드처럼 보이지 않습니다.

<table cellpadding="0" cellspacing="0" style="width: 100%"> 
    <tr> 
     <td rowspan="7"></td> 
     <td style="width: 600px; height: 100px;">&nbsp;</td> 
     <td rowspan="7"></td> 
    </tr> 
    <tr> 
     <td class="style1" valign="top"><?php echo($title); ?></td> 
    </tr> 
    <tr> 
     <td class="style2" valign="top"><?php echo($subtitle); ?></td> 
    </tr> 
    <tr> 
     <td class="style3" valign="top"><?php echo($content); ?></td> 
    </tr> 
    <tr> 
     <td class="style4"><?php echo($endtitle); ?></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 30px"></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 100px" class="style5" valign="top"></td> 
    </tr> 
</table> 

을 Style1 2 등이 간단하게 : 일부 폰트가 diferents

firts 화상 구글 크롬을 렌더링하고 파이어가 어떻게 두 번째 방법을 도시와

.style1 { 
    text-align: center; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    font-size: 32px; 
    color: #2B2B2B; 
    width: 600px; 
} 

:

Answer 1

귀하의 td에 너비를 정의하지 않으므로 부모 전자의 전체 너비가 필요합니다. ment. 또한 td {width:600px;}을 추가하면 크롬도 동일하게됩니다. td을 방화범으로 검사하면 offsetWidth이 600 인 DOM에 있지만 Chrome의 개발자 도구와 동일한 작업을 수행하면 offsetWidth이 1900 (화면에 따라 다름)이라는 것을 알 수 있습니다. 따라서 모든 브라우저에서 동일한 결과를 얻으려면 위에서 설명한대로 고정 너비를 설정해야합니다.

Answer 2

테이블에 너비를 설정해야합니다. td에서 너비를 설정하는 것은 부적절한 형식입니다.

<table cellpadding="0" cellspacing="0" style="width:600px"> 
    <tr> 
     <td rowspan="7"></td> 
     <td style="width: 600px; height: 100px;">&nbsp;</td> 
     <td rowspan="7"></td> 
    </tr> 
    <tr> 
     <td class="style1" valign="top"><?php echo($title); ?></td> 
    </tr> 
    <tr> 
     <td class="style2" valign="top"><?php echo($subtitle); ?></td> 
    </tr> 
    <tr> 
     <td class="style3" valign="top"><?php echo($content); ?></td> 
    </tr> 
    <tr> 
     <td class="style4"><?php echo($endtitle); ?></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 30px"></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 100px" class="style5" valign="top"></td> 
    </tr> 
</table> 

을 그리고 당신의 스타일은 다음과 같은 모양입니다 : : 귀하의 HTML은 다음과 같아야합니다

.style1 { 
    text-align: center; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    font-size: 32px; 
    color: #2B2B2B; 
    width: 100%; 
}