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

WebAdvocate 2010-07-29 04:41:14

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

<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

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

...全文

727 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

qiang5233 2011-10-28

打赏
举报

看了楼主的贴，好无聊，研究混杂模式博点击

fujye 2010-09-16

打赏
举报

这都可以。。。。。。。。。。。。。

WebAdvocate 2010-08-06

打赏
举报

[Quote=引用 5 楼 tizll521 的回复:]

说实话这个问题有点无聊
[/Quote]这个问题的意义在于提醒我们记清楚 width 和 height 的适用元素
其实所有的兼容性问题都可以让我们加深对标准的认识

tizll521 2010-08-06

打赏
举报

说实话这个问题有点无聊

WebAdvocate 2010-08-02

打赏
举报

[Quote=引用 3 楼 mochimo 的回复:]

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

mochimo 2010-08-01

打赏
举报

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

blacart 2010-07-30

打赏
举报

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.