先运行下程序看下:
<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

转载于:https://www.cnblogs.com/tweet/archive/2010/01/15/1648539.html

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

  1. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span> 输出:123 可以看到 spa ...

  2. 关于Ubuntu启动activeMq无效果的错误解决方案

    解压tar包到  /opt路径下: 开启服务,显示开启,但 http://127.0.0.1:8161/admin/  -->404 寻其原因: /opt/activemq/bin/active ...

  3. jQuery RemoveAttr（checked）之后再Attr（checked）属性无效果的原因分析

    jQuery中attr()和prop()在修改checked属性时的区别 投稿:whsnow 字体:[增加 减小] 类型:转载 使用语句$.attr('checked',true),将复选框的属性改为 ...

  4. android开机自启广播无效果的曲线解决方案

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?><manifest xml ...

  5. HTML中td元素的nowrap属性

    HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行. 但使用时要注意的是,td元素中nowrap属性的行为与td元素的width属性有关.如果未设置td宽度,则nowrap属性起作用的 ...

  6. a span等行内元素加margin属性后无效果解决方案

    html中经常用margin属性来进行定位的调整,但a,span等行内元素加margin后不发生位移,给这些元素加上display:inline-block后就可解决:而且为行内元素加此属性后既可以像 ...

  7. CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果

    一.简介 今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果.虽然这个场景,我还没有在实际工作中用到过 ...

  8. web前端学习（六）—— HTML中元素的id属性、div和span布局

    一.id属性 1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识,所以在同一个HTML文档中id值不能重复  2.注意:表单提交数据的时候,只和name有关系,和id无关 ...

  9. python span标签的text属性_如何使用python selenium单击span元素

    通过链接文字搜索只有在您的跨度是锚标记的子项时才能帮助您,例如< a>< span style ="vertical-align:middle;"> No& ...

最新文章

  1. 虚拟机下运行linux通过nat模式与主机通信、与外网连接
  2. 一文搞定Vim/Vi编辑器
  3. 20162318 2018-2019-2《网络对抗技术》Exp1 PC平台逆向破解
  4. python处理word文档保留格式_python 处理document文档 保留原样式
  5. Struts2中Result类型介绍
  6. 中文信息处理（二）—— 分词
  7. Windows Phone 7 Coding4Fun的弹出框
  8. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_04-新增页面-服务端-接口开发...
  9. 1808福师计算机基础第二次作业,1808福师计算机基础第一次作业.pdf
  10. Java 定时任务JOB
  11. 创建带有实时在线数据备份的指纹考勤系统
  12. MySQL超市会员管理系统_PHP+MYSQL药店会员管理系统的设计与实现
  13. java面试题题目与解析(自己网上找的)：java208
  14. Django（14）-应用及分布式路由
  15. 【机器学习】（十七）非负矩阵分解NMF：人脸图像特征提取、用特征排序；还原混合信号
  16. 模拟登陆广西科技大学正方教务系统
  17. 在MATLAB中调用 Python
  18. 百度收录静态html吗,网站设置伪静态更利于百度收录吗
  19. 实验11 虚函数与多态
  20. 中国大学公开课是垃圾，向哈弗公开课叫板！

热门文章

  1. android 自定义viewgroup onmeasure,一篇文章搞懂Android 自定义Viewgroup的难点
  2. CMake基础 第1节 初识CMake
  3. 12.当效率至关重要时，请在map::operator[]与map::insert之间谨慎作出选择
  4. STL 容器迭代器失效总结
  5. 你知道Linux和Unix的区别吗
  6. C++ string与数值的转换
  7. 嵌套 思维导图_Python 这方面，8张思维导图助你转身变大牛！
  8. 详细讲解在Spring中进行集成测试AbstractDependencyInjectionSpringContextTests
  9. Acknowledgement Modes
  10. XSLT简单教程--XSLT的实例