Span元素的width属性无效果原因及解决方案


Posted in Javascript onJanuary 15, 2010

先运行下程序看下:
<span style='background-color:#336699;width:300px;'>123</span>

输出:123

可以看到 span会自动根据包含的内容来变化宽度

这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素)
width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
zoom 总是可以触发 hasLayout,但是在 IE5.0 中不支持。

具有“layout” 的元素如果同时也 display: inline ,那么它的行为就和标准中所说的 inline-block 很类似了:在段落中和普通文字一样在水平方向和连续排列,受 vertical-align 影响,并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题,因为在别的浏览器中 display: inline 就是内联,不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

解决方法:

<1>去掉ASP.NET页面的W3C标准声明(不推荐):
去掉:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span style='background-color:#336699;width:300px;'>123</span>

<2>推荐:

如果设置display:block,width属性生效,但是此时的span跟div一样了。
如果设置display:inline-block,则span并列在同行,而且width属性生效。

元素display属性的常见值说明:

block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。(内联)

《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,

这里的“行布局”的意思就是说其表现形式始终以行进行显示。

比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。

假如是块级元素那么所显示的的黑线只会在块的下方出现。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。

内联(display:inline;)元素不能设置宽高,因为内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。
<span style='background-color:#336699;width:300px;display:inline-block;'>123</span>

输出:123

<3>如果设置float:left | right,width属性生效.

(浮动)他使得指定元素脱离普通的文档流而产生的非凡的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。
<span style='background-color:#336699;width:300px;float:left;'>123</span>

输出:123

Javascript 相关文章推荐
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
javascript的BOM
May 03 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
angular 组件通信的几种实现方式
Jul 13 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
用jQuery扩展自写的 UI导航
Jan 13 #Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
JavaScript关于select的相关操作说明
Jan 13 #Javascript
海量经典的jQuery插件集合
Jan 12 #Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 #Javascript
You might like
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
js实现延迟加载的方法
2015/06/24 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python实现定时播放mp3
2015/03/29 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python烟花效果的代码实例
2020/02/25 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
前厅收银主管岗位职责
2014/02/04 职场文书
读书月活动方案
2014/05/22 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
离婚协议书范文
2015/01/26 职场文书
欠条范文
2015/07/03 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
2019邀请函格式及范文
2019/05/20 职场文书