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

WebAdvocate WebAdvocate 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
最近,还碰到一个比较蹊跷的问题,源于一个比较奇怪的想法: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


更多浏览器兼容性问题,跨浏览器开发专版:【分享】浏览器兼容性问题目录
...全文

相关推荐

iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过

废话不多说,贴上代码,也算是自己的一个代码存储。 代码如下: var temp_iframe var content = document.getElementById(‘right’); //id为 right的DOM容器中,进行创建iframe和宽高自适应 var c = 0; function append(filename) { var the_iframe = “helpfile” + c; temp_iframe = document.createElement(“iframe”); temp_iframe.src = filename; temp_iframe.scrollin

weixin_38659646

JS获取图片高度宽度的方法分享

主要介绍了JS获取图片高度宽度的方法,开始的时候没能做到兼容chrome,在度娘和众网友的帮助下,最终完成了完美兼容,这里分享给大家,有需要的小伙伴可以参考下。

weixin_38607195

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

在js使用过程中可能会根据要求获取浏览器窗口的可视区域高度和宽度,滚动条高度,于是本人搜集整理下,拿出来和大家分享,希望可以帮助你们

weixin_38663415

兼容ie、firefox的图片自动缩放的css跟js代码分享

这个功能主要是解决内容页中的图片过大撑出,导致页面比较难看,就需要这样的代码,需要的朋友可以参考下 需求:图片width&lt;=600px,height&lt;=800。 1、利用max-width,max-height使图片等比例自动缩放代码: 代码如下: img{max-width: 600px;max-height: 800px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。 2、用javascript脚本来兼容ie6,代码如: 代码如下: var img_width = img.OffsetWidth;&lt;BR

weixin_38574132

IE兼容性总结

这是我做网站是要考虑IE 678兼容性的总结,里面不足请见谅咯

cuiwenjun57
评论 8
收藏 已收藏
分享
返回顶部
WebAdvocate
跨浏览器开发 5,006 成员 2,692 内容