2014-02-23 4 views
0

왜 h2를 표 셀 안에 단락 안에 넣을 수 없습니까? (크롬과 FF 테스트)table tr td p h2 - 그게 뭐가 잘못 되었 니?

<table> 
    <tr> 
     <td> 
      <p> 
       <h2>Header</h2> 
       test123 
      </p> 
     </td> 
    </tr> 
</table> 

http://jsfiddle.net/4e6Lp/

단락의 내용은 TD에게 점프 p는 빈됩니다 :

chrome render

+0

@Wilf, 코드에서 그는 p> h2이지만 브라우저에서 그는 p + h2 – Epsil0neR

+0

@ Epsil0neR입니다. - 그 점을 알아 채고 대답을 게시했습니다. :디 – Wilf

답변

1

의 외부 <h2> 헤더를 사용

<table> 
    <tr> 
     <td> 
      <p> 
       <strong>Header</strong><br> 
       test123 
      </p> 
     </td> 
    </tr> 
</table> 

또는 p의 콘텐츠 모델은 "인라인"또는 "텍스트 수준"콘텐츠 만 허용합니다. 정확한 콘텐츠 모델 (및 용어)은 HTML 버전에 따라 다르지만 어떤 버전도 h2을 인라인/텍스트 수준으로 간주하지 않습니다. 예 : HTML 4.01 spec text on the p element. p을 HTML의 옛 의미로 생각하면 자연스러운 것입니다. 텍스트의 단락을 표시합니다. 기본적으로 복사 텍스트 블록입니다.

콘텐츠 모델은 브라우저에 의해 규칙을 구문 분석하여 적용됩니다. p 요소가 열려있을 때 <h2> 태그가 암시 적으로이를 닫습니다. 따라서 질문에 주어진 경우에 td 요소는 공백이 내용 인 p 요소를 포함하고 h2 요소를 포함하고 "느슨한"텍스트 (텍스트 노드 만)를 포함합니다.

결론은 p 요소에 셀 내용을 래핑하려는 이유에 따라 달라집니다. 일반적으로 그럴 이유가 없습니다. 그러나 래퍼가 필요한 경우 div 요소를 대신 사용하십시오.

2

이 소스에 따라 : http://risd.generic.cx/containment.html 페이지 요소가 보유 할 수 만 :

  • 텍스트 노드
  • 강력한
  • 그들을
  • IMG

는하지만 <p> 어떤 인라인 및 인라인 블록 요소를 보유 할 수 있다고 생각합니다.

0

가 의도적으로 헤더로 의미하지 않는 한, 당신은 대신 텍스트를 굵게 만들 수 있습니다 : @ Epsil0neR 말한대로, <p> 단락