当前位置：首页 → 问答吧 → 【分享】你肯定没注意过，SPAN元素的宽度高度在IE下竟然有用！！

【分享】你肯定没注意过，SPAN元素的宽度高度在IE下竟然有用！！

时间：2010-07-29

来源：互联网

最近，还碰到一个比较蹊跷的问题，源于一个比较奇怪的想法：IE6不支持 inline-block，所以，就想试试，怎么把SPAN弄得可以设置高度宽度，结果，发现什么都不用设置，就可以…… 了。
HTML code

<span style="width:50px; height:50px; background-color:gold;">
   ALOHA
</span>

上面的代码中，SPAN是行内非替换元素，根据W3C标准，宽高不应当起作用。所以SPAN元素渲染后的宽高都应跟它的内容“ALOHA”有关。
在浏览器中测试了一下，结果发现，在IE的混杂模式里，高度宽度都是起作用的：

在IE的标准模式和其他浏览器中：

可见，IE只有在兼容模式下，宽高才会对行内非替换元素起作用。这个兼容性问题的最好解决办法就是使宽度高度在所有浏览器中不生效：在页面上添加<!DOCTYPE HTML>，使页面工作在标准模式下。

顺便说一下W3C相关此问题的标准。
宽度和高度特性是用来指定块级元素和替换元素生成框的内容宽度（content width）和内容高度（content height）。
CSS2.1中明确规定这两个特性不适用于行内非替换元素。
非替换行内元素框的宽度是它的内容渲染后（在任何子元素相对偏移之前）的宽度，它的高则是基于字体。
详见W3C CSS2.1参考资料：
宽度: http://www.w3.org/TR/CSS2/visudet.html#the-width-property
高度: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
宽度计算：http://www.w3.org/TR/CSS2/visudet.html#inline-width
高度计算: http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

更多浏览器兼容性问题，跨浏览器开发专版：【分享】浏览器兼容性问题目录

作者: WebAdvocate 发布时间: 2010-07-29

学学习，(*^__^*) 嘻嘻……

作者: lxh75 发布时间: 2010-07-29

http://msdn.microsoft.com/en-us/library/Bb250395(VS.85).aspx#cssenhancements_topic8

Width and Height of Inline Elements

Inline elements such as SPAN, B, and I do not support width or height properties. If you want to set the width or height property of an inline element with standards-compliant mode switched on, you must set the display property of the element to inline-block.

作者: blacart 发布时间: 2010-07-30

标准模式下为行内元素设置宽高不会触发layout。

作者: mochimo 发布时间: 2010-08-01

引用 3 楼 mochimo 的回复:

标准模式下为行内元素设置宽高不会触发layout。

good

作者: WebAdvocate 发布时间: 2010-08-02