HTML P不能包含块级元素（包括自身）

abcc项目中碰到的，在一个表单中用P包含一个label和div，从Firebug中看html结构div却跑到P外面去了。甚是诧异，原来P元素是不能包含块级元素（包括P自身）的。

The P element represents a paragraph. It cannot contain block-level elements (including P itself). 

以下是html片段，P包含了一个行内及块级元素，没有一个浏览器是按代码的结构去渲染的。

?

1 2 3 4 5 6 7 8 9 10

<p>           <label for="username">用戶名：</label>     <div>     <select name="username">         <option value="1">張三</option>         <option value="2">李四</option>         <option value="3">王五</option>     </select>     </div> </p>

FF下渲染DOM结构如下：

IE6/7/8

IE9

Chrome/Safari

Opera

以上图可以看到

IE6/7/8 是一种结构，IE9/Opera是一种结构，Firefox是一种结构，Safari/Chrome又是一种结构。

HTML貌似简单，但胡乱嵌套到导致很多意想不到的bug。如样式丢失，样式变形等等。须注意。

相关：HTML元素嵌套表