Width compatibility of different browsers

The size of the area occupied by the CSS box is the margin (margin) + border (border) + fill (padding) + width (width ). So when you set the width to 200 pxborder: 1px, the actual maximum width of the DIV is 200. only the actual page width occupied by the DIV is: 1 (left border) + 200 (width) + 1 (right border) = 202. Therefore, the DIV contains a 200 width that can accommodate the contained DIV. Of course, if the DIV width inside is greater than 200, the width defined by the external DIV will be ineffective.

Note: If you set the padding: 2px attribute, the DIV width should be as follows:
1 (left border) + 2 (padding) + 200 (width) + 2 (padding) + 1 (right border) = 206

Of course, the above is a correct explanation, but note that pulling IE6.0 will not be calculated based on the correct interpretation of CSS2. Sometimes the IE algorithm will be properly interpreted, most of the time, IE calculates the padding value in width and returns 202 according to the IE algorithm, because IE thinks that padding is part of width. Therefore, in IE, the actually usable width of the div is 200-2-2 = 196, but the actually usable width of the DIV in other browsers is 200.

This is a typical hack of IE6.0 (browser compatibility ). Therefore, it is recommended that you do not define padding for the DIV. I have seen the most abnormal explanation of IE during the operation, IE calculates the width of the first DIV according to the correct explanation. Then, the other DIV follows the IE method (that is, padding is part of width ). At that time, the two DIV calls the same class.