微科社区,轻松开发从此开始! 请登陆 免费注册

微科社区

当前位置:首页 > Web开发 > HTML(CSS) >

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

时间:2017-02-17 03:13  浏览:努力统计中...
先运行下程序看下: span style= background-color:#336699;width:300px; 123/span 输出: 123 可以看到 span会自动根据包含的内容来变化宽度 这是因为: 对于内联元素(可以是默认即为内联的比如 span 元素,

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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线------