欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

你肯定没注意过,span元素的宽度高度在ie上竟然有用!

更新时间: 2014-01-05 01:57:13 责任编辑: Author_N1

 

【分享】你肯定没注意过,SPAN元素的宽度高度在IE下竟然有用!!
最近,还碰到一个比较蹊跷的问题,源于一个比较奇怪的想法:IE6不支持 inline-block,所以,就想试试,怎么把SPAN弄得可以设置高度宽度,结果,发现什么都不用设置,就可以…… 了。
<span style="width:50px; height:50px; background-color:gold;">
   ALOHA
</span>
上面的代码中,SPAN是行内非替换元素,根据W3C标准,宽高不应当起作用。所以SPAN元素渲染后的宽高都应跟它的内容“ALOHA”有关。
在浏览器中测试了一下,结果发现,在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。
--参考方法--
说实话  这个问题有点无聊  
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:57:13
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/3592/
本文WWW.DOC100.NET DOC100.NET版权所有。