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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
微信小程序实现图片上传
May 23 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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
window.opener用法和用途实例介绍
2013/08/19 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
django的ORM模型的实现原理
2019/03/04 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
详解python中index()、find()方法
2019/08/29 Python
Python绘图实现显示中文
2019/12/04 Python
python 实现dict转json并保存文件
2019/12/05 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python 如何调用 dubbo 接口
2020/09/24 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
主持人演讲稿范文
2013/12/28 职场文书
工作疏忽检讨书
2014/01/25 职场文书
个人向公司借款协议书
2014/10/09 职场文书
创先争优承诺书
2015/01/20 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python