Css HACK, csshack

Css HACK, csshack

1. What is CSS hack?

CSS hack allows different browsers to recognize different symbols by adding some special symbols to CSS styles.
(What kind of browsers recognize what kind of symbols are standard, CSS hack is to let you remember this standard), in order to apply different CSS styles,

For example,. kwstu {width: 300px; _ width: 200px ;}
Generally, the browser uses the style of width: 300px for the element first, followed by a _ width: 200px;
Because the underline _ width can only be recognized by IE6, this style actually sets the object width to 200px in IE6, and overwrites the previous one,
Other browsers do not recognize _ width and do not execute _ width: 200px. Therefore, in other browsers, set the object width to 300px;

 

2.CSS hack solves the problem

CSS hack is used to solve the problem that some css attributes display different effects in different browsers. For example, the distance displayed by the margin attribute in ie6 is twice the distance displayed in other browsers, that is, margin-left: 20px; in ie6, the actual display distance from the object on the left is 40px, while in ie6, the display distance from the object on the left is set to 20px; therefore, to set the distance between an object and the object on the left, the style with a width of 20 PX should be :. kwstu {margin-left: 20px; _ margin-left: 20px ;}.

 

3,Character Standard table for browser Recognition

 

 

The following situations can be analyzed:

1. Most special characters are supported by IE browsers. Other mainstream browsers, such as firefox, chrome, opera, and safari, are not supported (except for opera recognition ). 2. \ 9: All ie browsers support 3. _ And-: Only IE6 supports 4. *: IE6 and E7 support 5. \ 0: supported by IE8 and IE9, and supported by opera 6. \ 9 \ 0: IE8 support, IE9 support 7. \ 0 \ 9: supported by IE8 and IE9

 

Therefore, we can write the order as follows: (this is also compatible with the summary of major browser browsers)

. Element {

Color: #000;/* w3c standard */

[; Color: # f00;];/* Webkit (chrome and safari )*/

Color: #666 \ 9;/* IE8 */

* Color: #999;/* IE7 */

_ Color: #333;/* IE6 */

}
: Root. element {color: #0f0 \ 9;}/* IE9 */

@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (

-Webkit-min-device-pixel-ratio: 0 ){
. Element {color: #336699 ;}
}/* Opera */

@-Moz-document url-prefix (){
. Element {color: # f1f1f1 ;}
}/* Firefox */

 

(1) Clear floating

In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating HACK can be used to define the parent level.

select:after {　　content:”.”;　　display:block;　　height:0;　　clear:both;　　visibility:hidden;}