Solutions compatible with various browsers in css

1. Several browsers in CSS support different keywords, which can be repeatedly defined for browser compatibility
!important can be recognized by FireFox and IE7
* can be recognized by IE6 and IE7
_ can be recognized by IE6
*+ Can be recognized by IE7.
Difference between IE6 and FF:
background:orange; :green;
Difference between FF, IE7, IE6:
background:orange;*background:green !important;*background:blue;
IE7, IE8 compatible:


2. IE-specific conditional comments









3. Several browsers’ interpretation of actual pixels
IE/Opera: The actual width of the object = (margin-left) + width + (margin-right)
Firefox/Mozilla: The actual width of the object = (margin-left) + (border-left-width) + (padding- left ) + width + (padding-right) + (border-right-width) + (margin-right)

4. Mouse gesture problem: FireFox’s cursor attribute does not support hand, but it supports pointer, and IE supports both; so For compatibility, pointer is used

5. When setting the Style attribute of the HTML tag in FireFox, all position, width, height, and size values ​​must be followed by px. IE also supports this writing method, so the px unit is added uniformly. For example, Obj.Style.Height = imgObj.Style.Height + 'px';

6. FireFox cannot parse the abbreviated padding attribute setting, such as padding 5px 4px 3px 1px; it must be changed to padding-top:5px; padding-right: 4px; padding-bottom:3px; padding-left:1px0;

7. When eliminating the indentation of lists such as ul and ol, the style should be written as: list-style:none; margin:0px; padding:0px; where the margin attribute Valid for IE, the padding attribute is valid for FireFox

8. CSS control transparency: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox: opacity:0.6;

9. CSS control Rounded corners: IE: does not support rounded corners;

FireFox: -moz-border-radius:4px; or
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
- moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

10. CSS double-line bump border: IE: border:2px outset;

FireFox:
-moz-border-top -colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080 ;

11. IE supports the CSS method cursor:url() to customize the cursor style file and scroll bar color style; FireFox does not support either of the above

12. IE has a bug where the Select control is always on top, and all CSS does not work on the Select control

13. IE supports Label tags in Form, including pictures and text content; FireFox does not support Labels containing pictures. Clicking on the picture will not cause the Radio or CheckBox marked label for to have an effect

14 . TextArea in FireFox does not support the onScroll event

15. FireFox does not support inline and block of display

16. FireFox already centers the Div when margin-left and margin-right are set to auto, but it does not work in IE

17. FireFox When setting text-align for Body, Div needs to set margin: auto (mainly margin-left margin-right) to be centered

18. It is best to set the CSS style of hyperlinks in this order: L-V-H-A. That is

This can prevent some hyperlinks from not having the hover and active styles after being visited

19. Set long paragraphs to automatically wrap in IE and set word-wrap:break-word in CSS; use JS in FireFox The insertion method is implemented. The specific code is as follows:


20. After adding the floating attribute to the sub-container, the container Will not be able to open automatically
Solution: Add a CSS clear:both;

to the next label after the label ends to clear the floating