码迷,mamicode.com
首页 > Web开发 > 详细

(转)html span标签设置width不起效解决方式

时间:2018-05-20 18:22:58      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:ie6   调整   方向   col   win   问题:   为什么   inline   解决方法   

问题:在设置同级标签时,width属性不起效果,会自动根据包含的内容来变化宽度

原因:

  对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素)

  width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。

  而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
     具有“layout” 的元素如果同时也 display: inline ,那么它的行为就和标准中所说的 inline-block 很类似了:

        在段落中和普通文字一样在水平方向和连续排列,受 vertical-align 影响,并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包        含块级元素而少出问题,因为在别的浏览器中 display: inline 就是内联,不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

解决方法:

  
  如果设置display:block,width属性生效,但是此时的span跟div一样了。
  如果设置display:inline-block,则span并列在同行,而且width属性生效。(一般情况下使用这个)

参考至:

http://www.jb51.net/css/21614.html

(转)html span标签设置width不起效解决方式

标签:ie6   调整   方向   col   win   问题:   为什么   inline   解决方法   

原文地址:https://www.cnblogs.com/li-yi-learn/p/9063812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!