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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
JS中的三个循环小结
Jun 20 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
CI框架附属类用法分析
2018/12/26 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
详解Python中for循环的使用方法
2015/05/14 Python
Python修改MP3文件的方法
2015/06/15 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
django_orm查询性能优化方法
2018/08/20 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python 实现return返回多个值
2019/11/19 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
学生自我鉴定
2013/12/18 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
焦点访谈观后感
2015/06/11 职场文书
2016国庆促销广告语
2016/01/28 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书