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 相关文章推荐
js href的用法
May 13 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
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
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
民生工程实施方案
2014/03/22 职场文书
售房协议书
2014/08/19 职场文书
心得体会的写法
2014/09/05 职场文书
党支部书记岗位职责
2015/02/15 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
暖春观后感
2015/06/08 职场文书
党员理论学习心得体会
2016/01/21 职场文书