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包含了一個行內及塊級元素,沒有一個瀏覽器是按代碼的結構去渲染的。
<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元素嵌套表