CSS code to implement techniques compatible with various browsers_Experience exchange

when writing css style sheets, we often encounter browser compatibility issues. for example, browsers with different cores may not necessarily display the same display, and different versions of browsers may also have upper and lower compatibility issues. how to solving these problems has become a distressing issue for us. if you know css hack technology very well, then this is too simple, but for those who don't understand it very well, it has become a really distressing thing for them. here is an article from zhao lei’s official blog to introduce tips for compatibility with various browsers. but don’t think that as long as there is an error in the browser display, it is a browser problem. it is also likely that your structure is not good. i suggest you study the semantic structure. after all, when building a house, you need to build steel bars first.

1. different interpretations of the box interpreter.

the code is as follows:

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width 
/**/:500px; //for ie6.0-}

2. hide css in ie and use the sub-selector html>body #box{ }
3. only ie recognizes *html #box{ }
4. in ie/win effective and hidden by ie/max, use backslash /* \ */
#box{ }
5, define a separate style for ie. here is a more detailed explanation

6, double distance generated by floating ie #box{ float:left; width:100px; margin:0 0 0 100px; //in this case, ie will generate a distance of 200px display:inline; //ignore floating}
here we will talk about the two elements of block, inline. the characteristics of the block element are: always start at the new line, height, width, height, and border can be controlled (block element); the characteristics of the inline element are: on the same line as other elements,... cannot be controlled (inline elements);
#box{ display:block; //can simulate inline elements as block elements display:inline; //achieve the same line the effect of arrangement diplay:table; //for ff, simulate the effect of table}

7, for oprea only @media all and (min-width:0px){/* opera */#box {}}
8. problems with ie and width and height
ie does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. this is a big problem. if you only use width and height, these two values ​​​​will not change in a normal browser. if you only use min-width and min-height, the width and height are not set at all under ie.

for example, if you want to set a background image, this width is more important. to solve this problem, you can do this: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
9 ,the minimum width of the page
min-width is a very convenient css command. it can specify that the minimum width of the element cannot be less than a certain width, so as to ensure that the typesetting is always correct. but ie doesn't recognize this, and it actually treats width as the minimum width. in order to make this command work on ie, you can put a