The width:100% and Width:auto differences between CSS

The width:100% and Width:auto differences between CSS

First, the question

The previous time in the adjustment of the tree structure, found that if the tree node name is relatively long, the IE6 will not open the outside elements, resulting in the node name only half, while the icon and name wrapping display, but in IE8 and IE9 display normal. After locating the problem, the final discovery is caused by the following properties, such as red, and setting the value of width to auto solves the problem:

. Treeview. TreeView ul{ padding:0px 0px 0px 19px; List-style:none; margin:0px 0px; Width:100%;/* This is changed to auto*/ Background:url (./trstree-default-line.gif) repeat-y 0px Center; }

Ii. Conclusion

[1] width:100% does not contain the attribute value of the Margin-left margin-right, directly to the width of its parent container plus a value containing margin-left/margin-right. If margin is set, then the new width value is the width of the container plus the value of margin. (careful observation) will find added margin corresponding to the side will be more than the set of blank. and the horizontal scroll bar will be extra because the width is beyond the range of the screen. (This is body relative to the parent container).

[2] Width:auto contains the property value of Margin-left/margin-right. Its value contains the value of Margin-left/margin-right. Width:auto always occupy the whole line !!! The value of margin is already included (that is, a whole line) if you want to set the value of margin then use a whole line and subtract the value of margin to get the current width. This value is subtracted from the corresponding edge blank. The notable feature is that this does not appear as a horizontal scroll bar, which means that the width does not increase.

[3] Under the IE6 is not normal, but in IE8 and IE9 display Normal, may be IE8 and IE9 to width:100% resolution and IE6 different, but the two to Width:auto resolution is consistent.