CSS Hacker Usage Summary (compatible with IE6, 7, 8)

what is CSS hack
because of different vendors or different versions of a browser (such as ie6-ie11,firefox/safari/opera/chrome, etc.), CSS support, parsing is not the same, Results in inconsistent page presentation in different browser environments. At this point, in order to achieve a unified page effect, we need to write a specific CSS style for different browsers or different versions, we will write the corresponding CSS code for different browsers/different versions of the process, called CSS hack!

CSS hack principles
because different browsers and browser versions of CSS support and parsing results are not the same, and the CSS priority on the effect of the browser display, We can apply different CSS to different browser scenarios accordingly.

If you want to learn more about CSS hacker, it is recommended to view this article (http://www.jb51.net/css/493362.html).

<meta http-equiv= "x-ua-compatible"   content= "ie=edge,chrome=1" > This line of code is always in the latest IE version mode to display Web pages, Make IE support HTML5.
<meta name= "renderer" content= "WebKit" > This line of code is 360 browser render page by default with the fast kernel
<!--[if Lt IE 9]>
     <script src= "Http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js";
    < Script src= "Http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js";
<![ Endif]-->

CSS compatibility issues for each browser summary: http://www.jb51.net/css/9707.html
Conditional styles Override CSS Hacks scenario: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Recommendation: Use IETester software to test IE6, 7, 8.
As the name implies,!important has a higher priority. To illustrate:
Body
{
Background-color: #FF0000!important;
*background-color: #00FF00!important;
*background-color: #0000FF;
Background-color: #000000;
}
IE6 Choose the last one, that is: (because IE6 to important not cold)
IE7 choose the second, namely: Background-color: #000000; (because IE7 began to have a cold on important, while still clinging to its last version of the relationship, but important does not play a priority role)
IE8 and Firefox, Opera, Safari choose the first, namely:!important; (IE8 completely cold in the important, but also discarded the feelings of *)
In addition, add one, underline "_",
IE6 supports underscores, IE7, IE8, and Firefox, Opera, and Safari do not support underscores.

Finishing two: Ie6,ie7,firefox,opera,safari CSS-compatible solutions and CSS differences

Ie6,ie7,firefox,opera,safari CSS-compatible workarounds and CSS Differences
Reference URL: http://shouce.jb51.net/csshack/

Here are two ways to solve almost all of today's hack:

1.!important
With IE7 support for!important, the!important method is now only for IE6 hack. (Note the wording. Remember that the statement location needs to be advanced.)
2. Ie6/ie7 to Firefox
*+html and *html is the unique label of IE, Firefox is not supported. And *+html is a special label for IE7.
3. When the Web page in IE has abnormal performance, you can try to fire haslayout to see if it is the problem. A common method is to set zoom:1 for an element of CSS. Zoom:1 is used because, in most cases, it can fire the haslayout of an element without affecting the existing environment. And once the problem disappears, that's basically the reason why you can judge Haslayout. You can then fix the problem by setting the appropriate CSS properties. The first thing to consider is the Width/height attribute of the set element, followed by other attributes.
For IE6 and earlier, the usual method is known as the Holly Hack (Holly hack), which sets the height of the element to 1% (height:1%;). It is important to note that this method is invalidated when the overflow property of this element is set to visible. Or use the conditional comment of ie. For IE7, the best way is to set the element's minimum height to 0 (min-height:0;).
4.IE-CSS3.HTC let IE6, 7, 8 also support CSS3 fillets, shadows, text shadows and other effects.

Attached website: http://www.jb51.net/css/63281.html

5. In Mozilla Firefox and IE, the box model explanation inconsistency causes the difference 2px solution: div{margin:30px!important;margin:28px;}, note that the order of the two margin must not be written in reverse, According to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE actually explains this: div{maring:30px;margin:28px;}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;
6. A div set to float doubles the margin set under IE. This is a bug that exists in a IE6. The solution is to add display:inline to this div.
7.min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order to make this command available on IE, you can put a
Put it under the label and specify a class for the DIV:

Then the CSS is designed like this:
selector{
min-width:600px;
_width:expressio N (Document.body.clientWidth < 600?) 600px ":" Auto ");
}
or selector {
min-height:500px;
Height:auto!important;
height:500px;
}
8.ie the element disappears, adding to the element: position:relative;
9.ie7 Browser, the more text, buttons on both sides of the padding left white, the solution is to add overflow:visible attributes.

CSS Hacker Usage Summary (compatible with IE6, 7, 8)