CSS hack sorting

CSS hack is a remedy that can be used only when the standard CSS is not compatible with the display effect of each browser. Before the browser vendors reach an agreement on CSS resolution, we can only use this method to complete such a task.

During front-end development, the tested browsers include IE7, IE6, opera9 (9.25 8825 at the time of writing), and safari3 (3.0.4 523.15 at the time of writing ), firefox2 (version 2.0.0.11 at the time of writing ).

Based on the normal selector {property: value;}, hack is usually used for the same element to unify browsers.

IE series:

Selector {+ property: value;} is added with the plus sign "+" before the property name. This hack can only be identified by the IE series.
Selector {* Property: value;} is preceded by an asterisk (*). This hack is only recognized by the IE series.
Selector {_ property: value;} is underlined before the property name. This hack is only recognized by the IE series (except IE7.
* HTML selector {property: value;} uses the Inheritance Method on the selector * HTML selector. This hack is only recognized by the IE series (except IE7.
Html/**/> body selector {property: value;} use the Inheritance Method html/**/> body selector on the selector. This hack only has the IE series (except IE7) recognizable.
Selector {property/**/: value;} adds comments between the property name and colon ":" To block ie6.
Selector/**/{property/**/: value;} adds comments between the selector and curly brackets "{" and between the attribute name and colon, block ie5 and IE6 (do not block ie5.5 ).
Select/**/{property: value;} adds comments between the selector and curly braces "{" to block ie5.
* + HTML selector {property: value! Important;} use the Inheritance Method on the selector * + HTML selector plus! Important. This hack can only be identified by ie7.

Firefox:

*: Lang (Lang) selector {property: value! Important;} added with the pseudo-class Lang (language! Currently, only Firefox can recognize important.

Safari:

Selector: Empty {property: value! Important;} added with the pseudo class empty! Currently, only safari can recognize important.

Opera:

@ Media all and (min-width: 0px) {selector {property: Value ;}} is defined using the special inheritance method. Currently, only opera can recognize this feature.

The above hack is not complete. Let's add it together.

The most common application of hack is the CSS box model hack, which clears the floating hack.

The CSS box model has serious parsing errors on ie5.x. This hack is intended for ie5.x:

Selctor {width: ie5.x width; voice-family: "\" }\ ""; voice-family: Inherit; width: correct width ;}

To clear the floating hack, I believe there are many people using this definition:

Selector: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}

There are also a lot of CSS hack applications. If you list them one by one, you may be able to write a book... you can add them again.

The following compatibility diagram Source: http://centricle.com/ref/css/filters/

Click to zoom in

Classic forum discussion:
Http://bbs.blueidea.com/thread-2824980-1-1.html

Link: http://www.blueidea.com/tech/web/2008/5287.asp