CSS的width:100%和width:auto区别

CSS的width:100%和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的解析是一致的。