CSS Hack learning and summary

Recently I have been writing a lot of CSS files, and I found many problems after writing them, especially browser compatibility issues. Now I will write down what I learned and some summary.

1. What is CSS?

The abbreviation of Cascading Style Sheet.

A markup language that does not need to be compiled and can be directly interpreted and executed by the browser (a browser interpreted language ).

Responsible for the presentation of webpage content in standard webpage design.

For example, background-color: red; the background color of the described element is red.

2. What is CSS Hack?

Different browsers, such as IE6, IE7, and Firefox, have different understandings of CSS parsing, which leads to different page effects and cannot achieve the page effects we need. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.

This process of writing different CSS codes for different browsers is called CSS hack!

3. CSS Hack Classification

1. CSS internal Hack

*_! Important, etc.

2. selector Hack

* Html and * + html

3. Reference Hack (if IE) in the HTML Header)

<! -- [If IE 8]> introduce CSS <! [Endif]->

4. What are CSS Hack features?

The following list some symbols used by css hack, not all of which are enough.

CSS Hack	IE6	IE7	IE8	Firefox/chrome
*	√	√	X	X
! Important	X	√	√	√
-	√	X	X	X
_	√	X	X	X
+	√	√	X	X
\ 9	√	√	√	X
\ 0	X	X	√	X

* Note the writing method (in most cases, the hack is written under the normal CSS attribute)

5. differentiate IE from other browsers

 

. Class {
Color: # F00;
Color: # FFFFFF \ 9;
}

The text color in IE is white.
The text color in Firefox and chrome is red.

6. differentiate IE6 from other browsers

. Class {
Background-color: # F00;
_ Background-color: # FFFFFF;
}
Only IE6 can recognize _

In IE6, the background color is white.
In other browsers, the background color is red.

7. Support for IE6 and IE7

. Class {
Background-color: # F00;
+ Background-color: # FFFFFF;
}

In IE6 and IE7, the background color is white.
In other browsers, the background color is red.

8. Use of selector Hack

# Test
{
Width: 300px;
Height: 300px;
Border: 3px solid #0f0;
}

* Html # test
{
Background-color: # eee; // recognizable under IE6
}

* + Html # test
{
Background-color: #000; // recognizable in IE7
}

9. Reference Hack (if IE) in the HTML Header)

Used in work
<! -- [If lt IE 8]>
<Link rel = "stylesheet" href = "/stylesheets/blueprint/ie.css" type = "text/css" media = "screen, projection">
<Link rel = "stylesheet" href = "/stylesheets/app/ie-hack.css" type = "text/css" media = "screen, projection">
<! [Endif] --> <! -- [If IE 6]>
<Link rel = "stylesheet" href = "/stylesheets/app/ie6.css" type = "text/css" media = "screen, projection">
<! [Endif] -->

<! -- [If IE]>, <! -- [If! IE]>, <! -- [If! IE]>

10. Implement inline-block in all browsers

The ul li structure is generally used for navigation bars. Most of the time, I set li to float = left to display the same row side by side, finally, clear the floating (clear: both) to prevent subsequent elements from being affected. Another method is display: inline-block. ie6 and ie7 do not fully support inline-blockli {display: inline-block;} li {display: inline-block; is invalid in IE6/7; * display: inline; zoom: 1;} enable haslaout

Internal pptfile