Cross-browser CSS implementation

I. padding and margin

• Problem: FF in UL label has a padding value, but there is no margin value, while IE is the opposite.
• Solution: Set UL's padding and margin to 0 (or not 0), for example, padding: 0; margin: 0; List-style: none; in addition, the form also has the margin value in IE by default, so it is best to set its margin and padding to 0.

Ii. cursor

• Problem: You can set cursor: hand as a hand in IE, but not in Firefox.
• Solution: Use cursor: pointer.

Iii. Unit

• Problem: the IE value of any distance can be in no unit. Firefox must require the write unit (except 0 ).
• Solution: Write All units such as padding: 0px;

Iv. Height

• Problem: If the height of a div is set, when the actual content in the DIV is greater than the height, ie will automatically stretch to adapt to the size of the DIV container. Firefox will fix the DIV's instructions, if the part exceeds the bottom line of the DIV, it overlaps with the following content.
• Solution: control the appropriate height, or disable writing, so that the browser can automatically adjust the height, or set overflow: hidden;

V. Clear: Both

• Problem: If n columns of Div are controlled by float, the system will automatically check and arrange the DIV columns in IE, And the DIV columns may be moved everywhere in Firefox.
  Solution: add clear: both to the next label after the float ends to end the float control.

Vi. Actual pixels

• IE/Opera: actual width of the object = (margin-left) + width + (margin-right)
• Firefox/Mozilla: actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)
  Therefore, the display width of IE and Firefox is slightly different when columns are arranged.