问题描述:
在一个按 左 中 右 三列布局的门户中, 里面的内容模块都是用同一个主题展现的。
1. 在IE6中不存在问题;
2. IE8 兼容性视图模式,左边的内容模块的边框,标题栏比其他部分宽了1像素 1px;中间和右边的内容模块显示正常
3. IE9 兼容性视图模式,右边的内容模块的边框,标题栏比其他部分宽了1像素 1px;左边和中间的内容模块显示正常
4. IE8 非兼容性模式,内容模块的标题栏高度高于设置高度(多亏了这,我才找到了原因);
问题的原因:
原来是标题栏的文字部分,容器用了段落<p> 的原因造成的。
问题解决方式:
用<span> 替换<p> (用<div> 测试也可以)
问题深究:
(网上找的span div p 的区别)
span和div的不同之处在于span是内联的,用在一小块的内联HTML中,前后不断行.
div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。
p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行.
<span> 标签被用来组合文档中的行内元素。
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。