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

<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元素嵌套表

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章