Although I have known about css and div before, I really know nothing about browser compatibility issues. This time around the mall, after being introduced by friends, there is also the magical thing css hack. I tried it and found it really worked well. Many people are worried about browser compatibility issues, and they used css hack to solve everything. Directly share the compiled css hack
CSS Hack is a remedy that is only used when standard CSS is not compatible with the display effects of various browsers. Before various browser manufacturers can not reach an agreement on parsing CSS, we can only use this method to complete such tasks.
When I was conducting front-end development, the browsers I used for testing were: IE7, IE6, Opera9(version 9.25 8825 at the time of writing), Safari3(version 3.0.4 523.15 at the time of writing), Firefox2(version 2.0.0.11 at the time of writing).
On the basis of the normal selector { property:value; }, Hack is often used for the same element according to specific circumstances to achieve uniformity among browsers.
IE Series:
selector { +property:value; } adds a plus sign "+" before the property name. This Hack is only recognized by the IE series.
selector { *property:value; } adds an asterisk "*" to the property name. This Hack is only recognized by the IE series.
selector { _property:value; } Underlines "_" before the property name. This Hack is only recognized by the IE series (except IE7).
* html selector{ property:value; } Use inheritance method * html selector on the selector. This Hack is only recognized by IE series (except IE7).
html/** / >body selector { property:value; } Apply inheritance method on the selector html/** / >body selector , this Hack can only be recognized by IE series (except IE7).
selector { property/** /:value; } Add a comment between the attribute name and the colon ":" to block IE6 usage.
selector/** / { property/** /:value; } Add comments between the selector and the curly braces "{" and between the attribute name and the colon ":" to block IE5 and IE6 (not block IE5.5) .
select/** / { property:value; } Add a comment between the selector and the curly braces "{" to block IE5 usage.
*+html selector { property:value ! important; } Apply inheritance method on the selector *+html selector plus! Important, this Hack can only be recognized by IE7.
Firefox:
*:lang(lang) selector { property:value ! important; } Add it with the pseudo-class lang(language)! If important is defined, currently only Firefox can recognize it.
Safari:
selector:empty { property:value ! important; } Add it with the pseudo-class empty! If important is defined, only Safari can recognize it.
Opera:
@media all and (min-width: 0px){ selector { property:value; } } If defined using a special inheritance method, only Opera can recognize it.
The above Hack is not complete, let's add it together.
The most common application of Hack is the CSS box model Hack, which removes floating Hacks.
The CSS box model has serious parsing errors on IE 5.X. This Hack is for IE5.X:
selector { width:IE5.X width; voice-family :""}"; voice-family:inherit; width: correct width; }
To clear floating Hack, many people believe that this definition is used:
selector:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
In addition, there are many, many uses of CSS Hack. If you list them one by one, you might be able to write a book... Think of adding them again.