CSS的width:100%和width:auto区别
2011-12-05 21:26
274 查看
CSS的width:100%和width:auto区别
一、 问题
前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和名称换行显示了,但是在IE8和IE9下则显示正常。定位到问题后,最终发现是下面的属性导致的,如下图红色所致,把width的值设置为auto后即可解决问题:
二、 结论
[1] width:100% 并不包含margin-left margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。(细心观察)就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。
[2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行!!!这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
[3] 在IE6下显示不正常,但是在IE8和IE9下显示正常,可能是IE8和IE9对width:100%的解析与IE6不同所致,但是两者对width:auto的解析是一致的。
一、 问题
前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和名称换行显示了,但是在IE8和IE9下则显示正常。定位到问题后,最终发现是下面的属性导致的,如下图红色所致,把width的值设置为auto后即可解决问题:
.TreeView,.TreeView ul{ padding:0px 0px 0px 19px; list-style:none; margin:0px 0px; width:100%;/*这里修改为auto*/ background:url(./trstree-default-line.gif) repeat-y 0px center ; } |
[1] width:100% 并不包含margin-left margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。(细心观察)就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。
[2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行!!!这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
[3] 在IE6下显示不正常,但是在IE8和IE9下显示正常,可能是IE8和IE9对width:100%的解析与IE6不同所致,但是两者对width:auto的解析是一致的。
相关文章推荐
- CSS的width:100%和width:auto区别
- width:100%和height:auto区别
- 当css属性width设为100%时
- CSS: width:100% 和 width:auto
- CSS的width:100%和width:auto区别
- css中width:auto和width:100%的区别有哪些
- 当css属性width设为100%时
- CSS width:100%
- css中width的计算方式,以及width:100%的参考系
- CSS的width:100%和width:auto区别
- css属性width默认值width: auto与width: 100%区别
- css中width:auto和width:100%的区别是什么
- 【CSS】width 和 height 100%
- css width:100% 和width:auto的区别
- css 父元素设置padding、border、margin的情况下,子元素width100%呈现情况
- CSS“width:100%”和宽度继承的浅薄认识
- 标准模式中的 IE width 100% bug CSS设置height:"100%" CSS处理圆角
- width 的100% 与 auto
- width:100%缩小窗口时背景图片出现空白bug
- Ext gridPanel宽度100%时width:10000 BUG解决