5004
社区成员
- 主页
【分享】你肯定没注意过，SPAN元素的宽度高度在IE下竟然有用！！
最近，还碰到一个比较蹊跷的问题，源于一个比较奇怪的想法：IE6不支持 inline-block，所以，就想试试，怎么把SPAN弄得可以设置高度宽度，结果，发现什么都不用设置，就可以…… 了。
在浏览器中测试了一下，结果发现，在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
更多浏览器兼容性问题，跨浏览器开发专版：【分享】浏览器兼容性问题目录
<span style="width:50px; height:50px; background-color:gold;">
ALOHA
</span>在浏览器中测试了一下，结果发现，在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
更多浏览器兼容性问题，跨浏览器开发专版：【分享】浏览器兼容性问题目录
...全文
请发表友善的回复…
发表回复
qiang5233 2011-10-28
看 了楼主的贴，好无聊，研究混杂模式博点击
fujye 2010-09-16
这都可以。。。。。。。。。。。。。
WebAdvocate 2010-08-06
[Quote=引用 5 楼 tizll521 的回复:]
说实话 这个问题有点无聊
[/Quote]这个问题的意义在于提醒我们记清楚 width 和 height 的适用元素
其实 所有的兼容性问题都可以让我们加深对标准的认识
说实话 这个问题有点无聊
[/Quote]这个问题的意义在于提醒我们记清楚 width 和 height 的适用元素
其实 所有的兼容性问题都可以让我们加深对标准的认识
tizll521 2010-08-06
说实话 这个问题有点无聊
WebAdvocate 2010-08-02
[Quote=引用 3 楼 mochimo 的回复:]
标准模式下为行内元素设置宽高不会触发layout。
[/Quote]good
标准模式下为行内元素设置宽高不会触发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.
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.
lxh75 2010-07-29
学学习，(*^__^*) 嘻嘻……