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

under the tag, and then specify a class for the div:

then the css is designed like this: #container{ min-width: 600px; width:expression(document.body.clientwidth                the first min-width is normal; but the width in the second line uses javascript, which is only recognized by ie, which will also make your html document less formal. it actually implements the minimum width through javascript judgment.​

the same method can also be used to achieve the maximum width for ie: #container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientwidth 1200? "1200px" : "auto";}
10, clear float
.hackbox{ display:table; //display the object as a block element-level table} or .hackbox{ clear:both;}
or add: after (pseudo object) to set the content that occurs after the object. it is usually used in conjunction with content. ie does not support this pseudo object and is not supported by ie browsers, so it does not affect ie/win browsers. . -------this is the most troublesome...

#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
11. div floating ie text produces a 3-pixel bug
the object on the left is floating, and the right is positioned using the left margin of the outer patch. the text in the object on the right will be 3px away from the left. #box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //this sentence is the key}
html code

12. attribute selector (this cannot be considered compatible, it is a bug in hiding css) p[id]{}div[id]{}
this is hidden for ie6.0 and versions below ie6.0, and works with ff and opera

there is still a difference between attribute selectors and sub-selectors. the scope of sub-selectors is narrowed in form, while the scope of attribute selectors is relatively large. for example, in p[id], in all p tags all those with ids are of the same style.

the above is the code for css techniques to achieve compatibility with various browsers_the content of experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!