CSS Hack Finishing

CSS Hack finishing-css tutorial

CSS hack is the standard CSS can not be compatible with the browser to display the effect of the remedy, in the browser manufacturers to resolve the CSS is not agreed before, we can only use this method to complete such a task.

When I developed the front-end, the test browser is roughly: IE7, IE6, OPERA9 (the article was written in the version of 9.25 8825), Safari3 (when the article was written version 3.0.4 523.15), Firefox2 (when the article was written version for 2.0.0.11) .

On the basis of normal selector {Property:value}, it is common to use hack for the same element according to the specific situation to achieve the consistency between browsers.

IE Series:

selector {Property:value} with the plus sign "" in front of the property name, this hack only the IE series can be identified.
selector {*property:value} with an asterisk "*" in front of the property name, this hack only the IE series can be identified.
selector {_property:value} is preceded by an underscore "_" in the property name, which is recognized only by the IE series (except IE7).
* HTML selector{Property:value} using the Continue method * HTML selector on the selector, this hack only IE series (except IE7) can be identified.
html/**/>body Selector {Property:value} uses the continuation method on the selector html/**/>body, this selector only IE series (except hack) can be identified.
selector {Property/**/:value} Adds a comment between the property name and the colon ":" to mask IE6.
selector/**/{Property/**/:value} Adds a comment between the selector and braces "{" and between the property name and the colon ":" to Mask IE5 and IE6 (without masking IE5.5).
select/**/{Property:value} Adds a comment between the selector and braces "{" To mask IE5.
* HTML selector {Property:value!important} Use the Continue method on the selector * HTML selector plus!important, this hack only IE7 can identify.

Firefox:

*:lang (lang) selector {Property:value!important} is defined with Pseudo-class Lang (language) plus!important, which is currently only recognizable by Firefox.

Safari:

Selector:empty {Property:value!important} is defined with pseudo class empty plus!important, which is currently only available for Safari.

Opera:

@media all and (min-width:0px) {selector {Property:value}} is defined by the extraordinary continuation method, currently only opera can recognize it.

The above hack is not complete, everybody supplements together.

The most common use of hack is the CSS box model hack, clear floating hack.

The CSS box model has a serious parsing error on the ie5.x. This hack is for ie5.x:

Selctor {width:ie5. x width; Voice-family: ""} ""; Voice-family:inherit; Width: correct breadth; }

Clear floating hack, believe that this definition uses a lot of people:

Selector:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}

In addition there are many many CSS hack, the list of words may be able to write a book ... Think of adding it again

Compatibility information: http://centricle.com/ref/css/filters/