Adaptive size of jquery BS and dialog controls

The style is a little ugly. For this reason, I re-create a style. When I thought it was finished, I found that the work on IE was abnormal, and the self-adaptive size could not be achieved.

It used to require xhtml, while the company's products were html. To this end, we have studied the implementation of adaptive size.

It turns out that jquery is amazing to take the width and height. It turns out that it is directly taking the offsetWidth/offsetHeight attributes of element in the dom. When element is inserted into the dom, the browser calculates the corresponding attributes based on the rules. Here we copy several related attributes.

ScrollWidth is the width of the actual content of the object. The width of the content changes with the number of content in the object (the actual width of the object may be changed if the content is too large ).

ClientWidth is the visible width of the object. If the value of clientWidth is not set to the same side of the scroll bar, it will change with the display size of the window.

OffsetWidth is the visible width of the object. The package's scroll bar and other edges change with the display size of the window.

Difference between clientWidth, offsetWidth, and clientHeight...



IE6.0, FF1.06 +:
ClientWidth = width + padding
ClientHeight = height + padding
OffsetWidth = width + padding + border
OffsetHeight = height + padding + border
IE5.0/5.5:
ClientWidth = width-border
ClientHeight = height-border
OffsetWidth = width
OffsetHeight = height
(The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight)

Offsetwidth: the offset width of the element relative to the parent element. Equal to border + padding + width
Clientwidth: the visible width of the element. Equal to padding + width
Scrollwidth: Specifies the width of an element and includes the scrolling part.

The reason for the failure is studied. It turns out to be jquery. the alerts control contains all Divs. For simple HTML in IE, the width of the div does not seem to increase according to the internal content. The size of the div is as large as the size of the content, in this way, the obtained offsetWidth is very large, and the adaptive size is not implemented. Of course, you can use offsetWidth for XHTML.

After reading the EXT implementation method, it is much more intelligent. The internal content uses the el with the change of content size, such as span, so that the offset attribute is true, add the Interior el widths, including padding and border, to calculate the total width of the outer layer.

Although I want to simply use xhtml, I cannot. Still learn EXT, although troublesome, but reliable.