CSS compatible with IE6, IE7, FF skills

1. CSS HACK　　　　 The following two methods can almost solve all current HACKs.　　　　1, !important　　　　With the support of IE7 for !important, the !important method is now only for IE6 (Note that the wording of the statement remember the position in advance..)

　　　　　7 H Ensure that there is the following statement at the top of the HTML: 　　　　　　　　 2. Universal Float closure (very important!)　　　　For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]　　　　Add the following code to Global CSS, and add class=”clearfix” to the div that needs to be closed. > / * Clear Fix * / .clearfix: after {content:; display “.”: block; height: 0; clear: both; visibility: hidden;} .clearfix { display:inline-block;　　　　}　　　　/* Hide from IE Mac */　　　　.clearfix (display:block;)　　　　/* End hide from IE Mac */　　　　　　　　　　　　　　　　　, compatible with other techniques */*　　　　 style啰嗦)　　　　1, setting padding to the div under FF will cause the width and height to increase, but IE will not. (It can be solved by !important) 　　　　2, centering problem. 　　　　1). Vertically centered. Set the current div to line-height Height, then pass vertical-align: middle. (Be careful not to wrap the content.)　　　　2).Horizontal center.margin: 0 auto;(Of course not universal)　　　　3, if you need to style the content in the a tag, you need to set display: block; (common in navigation tags) 　　　　4, the difference between FF and IE’s understanding of BOX leads to a 2px difference between the div set as a float and the doubling of the margin under IE. 　　　　5, the ul tag has list-style and by default under FF padding. It is best to declare in advance to avoid unnecessary trouble. (Common in navigation tabs and content lists) 　　　　6, do not set the height of the div as an external wrapper, it is best to add overflow: hidden. to achieve a high degree of adaptation. 7, Regarding the hand cursor. cursor: pointer. And the hand is only applicable to IE. 　　　　 1 For firefox ie6 and ie7, most of the css styles are now hacked with !important, for ie6 and firefox tests can be displayed normally, 　　　　 but ie7 is right!important If it can be explained correctly, the page will not be displayed as required! Find a pin 　　　　 A good way to hack IE7 is to use “*+html”. Now browse it with IE7, there should be no problem. Now write a CSS like this: 　　　　#1 {color: #333;} /* Moz */　　　　* html #1 {color: #666;} /* IE6 */　　　　*+html #1 {color: #999;} / * IE7 */　　　　 Then the font color is displayed as #333 under firefox, the font color under IE6 is displayed as #666, and the font color under IE7 is displayed as #999. 2 The main style definitions of the centering problem in the css layout are as follows: 　　　　body {TEXT-ALIGN: center;}　　　　#center {MARGIN-RIGHT: auto; MARGIN-LEFT: auto; center; This means that the content in the parent element is centered; this setting is fine for IE.　　　　 But it cannot be centered in mozilla. The solution is to add “MARGIN-RIGHT: auto; MARGIN-LEFT: auto;” when setting the sub-element definition. It should be noted that if you want to use this method to center the entire page, it is recommended not to put it in one In DIV, you can split multiple divs in turn, 　　　　 just define MARGIN-RIGHT: auto; MARGIN-LEFT: auto; in each split div. 3 Box models are explained differently. 　　　　#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-}　　　　4 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; //Make floats ignored)　　　　 Here are two elements of block and inline. The characteristics of the Block element are: always start on a new line, height , Width, line height, and margins can all be controlled (block element); the characteristics of the Inline element are: on the same line as other elements,…uncontrollable (inline element); 　　　　#box{ display:block; // The embedded element can be simulated as a block element display:inline; //Realize the effect of the same line arrangement diplay:table;　　　　5 IE and the width and height problem IE does not recognize the definition of min-, but in fact it treats the normal width Use height as if there is min. This is a big problem. If only the width and height are used, these two values ​​will not change in a normal browser. If only min-width and min-height are used, the width and height are not set in 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;}　　　　6 page The minimum width min-width is a very convenient CSS command. It can specify the minimum and no less than a certain width of the element, so as to ensure that the layout is always correct. But IE doesn’t recognize this, 　　　　 and it actually uses width as the minimum width. In order to make this command work on IE, you can put a