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 P不能包含块级元素（包括自身）相关推荐

p标签内不能包含块级元素
发现一个不常用的冷知识学html的时候,以为块级元素可以包含任意的块级元素事实并非如此,p标签是不可以包含任何跨级元素的有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
浅谈块级元素和内联元素的嵌套规则
1. 替换和不可替换元素从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容. 例如浏览器会根据<img> ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
HTML 块级元素、行内元素和行内块级元素
一.块级元素.行内元素和行内块级元素在 HTML 5 标准前,HTML 中的元素可以分为块级元素.行内元素(又称行级元素)和行内块级元素三种类型 ,它们的主要区别在于它们在文档流中所占据的空间和如何 ...
html中哪个属性表示块级元素,HTML块级元素与行级元素
转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...
【HTML】行内元素与块级元素
一.行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
HTML哪些是块级元素，哪些是行内元素、
块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1> ...

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

HTML P不能包含块级元素（包括自身）相关推荐

最新文章

热门文章