你肯定没注意过，SPAN元素的宽度高度在IE上竟然有用！
日期：2014-05-17 浏览次数：20661 次
【分享】你肯定没注意过，SPAN元素的宽度高度在IE下竟然有用！！
最近，还碰到一个比较蹊跷的问题，源于一个比较奇怪的想法：IE6不支持 inline-block，所以，就想试试，怎么把SPAN弄得可以设置高度宽度，结果，发现什么都不用设置，就可以…… 了。
在浏览器中测试了一下，结果发现，在IE的混杂模式里，高度宽度都是起作用的：
[img=https://lh4.googleusercontent.com/KR2FbUydDanjdYMOJC8lJiNtvU0wyo-WXmcCAmbZvp_QDgJEg02uZDproqw_4iqgzNz3WTDeP3KxvpI_v9LTdU4g1F3MsyHm81PRvMTGFuplpaeFfA][/img]
在IE的标准模式和其他浏览器中：
[img=https://lh6.googleusercontent.com/R1eWBSbexOhff_kaF5sk-Z7r_ZpkAcJeAwYYa489kvEUB_bKiU7udDQ8koBg51YKwYg1jNpqm_ktEitIwcLPXQ1MhKTF7Pn6TzV9g3O6NE6PFyyAXQ][/img]
可见，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
更多浏览器兼容性问题，跨浏览器开发专版：【分享】浏览器兼容性问题目录
------解决方案--------------------
学学习，(*^__^*) 嘻嘻……
------解决方案--------------------
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.
------解决方案--------------------
标准模式下为行内元素设置宽高不会触发layout。
------解决方案--------------------
说实话 这个问题有点无聊
最近，还碰到一个比较蹊跷的问题，源于一个比较奇怪的想法：IE6不支持 inline-block，所以，就想试试，怎么把SPAN弄得可以设置高度宽度，结果，发现什么都不用设置，就可以…… 了。
<span style="width:50px; height:50px; background-color:gold;">上面的代码中，SPAN是行内非替换元素，根据W3C标准，宽高不应当起作用。所以SPAN元素渲染后的宽高都应跟它的内容“ALOHA”有关。
ALOHA
</span>
在浏览器中测试了一下，结果发现，在IE的混杂模式里，高度宽度都是起作用的：
[img=https://lh4.googleusercontent.com/KR2FbUydDanjdYMOJC8lJiNtvU0wyo-WXmcCAmbZvp_QDgJEg02uZDproqw_4iqgzNz3WTDeP3KxvpI_v9LTdU4g1F3MsyHm81PRvMTGFuplpaeFfA][/img]
在IE的标准模式和其他浏览器中：
[img=https://lh6.googleusercontent.com/R1eWBSbexOhff_kaF5sk-Z7r_ZpkAcJeAwYYa489kvEUB_bKiU7udDQ8koBg51YKwYg1jNpqm_ktEitIwcLPXQ1MhKTF7Pn6TzV9g3O6NE6PFyyAXQ][/img]
可见，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
更多浏览器兼容性问题，跨浏览器开发专版：【分享】浏览器兼容性问题目录
------解决方案--------------------
学学习，(*^__^*) 嘻嘻……
------解决方案--------------------
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.
------解决方案--------------------
标准模式下为行内元素设置宽高不会触发layout。
------解决方案--------------------
说实话 这个问题有点无聊
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
