12 standard style styles to solve browser compatibility issues

Browser compatibility is a headache for many web Front-ends, because different browsers use different kernels and support HTML and other webpage language standards, and the display effect caused by different client environments cannot achieve the desired effect. For browser compatibility problems, only through continuous debugging and standardized style code can some hack be avoided, reduces a lot of extra work. Here, I will share my browser compatibility experience accumulated since I was engaged in front-end development. --(Sichuan design-Luzhou website production)

1. A string of unfixed width A labels in IE6 7 cannot automatically skip rows in A fixed-width container. Instead, the last side is squeezed into A column with only one character width, we can use the span label to wrap the label, and the span label is set to display: inline-block.

2. The absolute positioning elements in IE6 7 are not controlled when top (bottom) and left (right) are not set. All must be set.

3. When the span label sets the float attribute in IE6, It is not aligned with other elements in the same row, and there is a gap on the left side of the board, which will cause the following elements to be squeezed out, in addition, it is best to set the global attribute display as inline-block for span to reduce unnecessary debugging.

4. label labels are very difficult to control. We are used to placing the input [checkbox] and input [radio] labels in the label, it is convenient to select the text when you click the text. The two labels cannot be horizontally aligned with the text in Google and so on. We can set the float attribute and then set the margin-top, writing a hack * margin is zero in IE, so this problem can be well handled.

5. Right floating element. If other elements in the same row are not set to left floating, IE6 7 will fall to the next row.

6. margin-bottom is invalid in IE6 7, so it is best to set padding-bottom or set margin-top in the following element.

7. When li in the ul list label sets the margin attribute, it will be doubled in ie6, so it is best to use the padding attribute instead of the padding.

8. input [button] the border must be set to border: none 0 if no border is required; otherwise, the border is displayed in IE6.

9. The left graph is a text structure. The img label is set to float left. The p label can only set padding-left or right float. Otherwise, it will be squeezed out in IE7.

10. style comments */separated by a space. Otherwise, if the comment character in IE6 is an odd number, it will be parsed into another character.

11. text-overflow: ellipsis; white-space: nowrap; overflow: Den den; it is not supported in Firefox, so the height of the peripheral element must be set.

12. The img label is separated by another pixel in IE6 7 and must be left floating for img. It is best to set the global attribute display attribute to block for img.

Thank you for your correction.

Original (Sichuan design-Luzhou website production) Reprinted please indicate the source www.tranye.com