Once people get used to something, it is difficult to change it. For various reasons, there are more and more new browsers, but the old ones cannot be eliminated. Growth is always faster than death, resulting in browser compatibility becoming an endless topic. Speaking of browser compatibility, CSS HACK naturally comes to mind. Today, we usually have a team or a team of people doing the same thing in a company. We need to have unified specifications for coding to facilitate maintenance. The way to solve compatibility is (it must be, because this is the most likely to have problems) one of the most important specifications to be solved.
In terms of compatibility solutions, if we want to formulate a unified specification, I personally think that the following three points should be the basic principles:
Putting cost first here does not mean that we are unwilling to pursue perfection, but that pursuing perfection too deliberately may sometimes hinder our progress; after cost, it should be maintainable and readable, which is very important to the team. cooperation is crucial, and the end result is to reduce costs.
Let’s save these three principles first, and let’s take a look at our usual writing methods to solve compatible problems (a detailed list of Hack methods will be attached later):
1. CSS Selector Hack
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}
The advantages and disadvantages of this way of writing are :
2. CSS Property Hack
.sofish{
padding:10px;
padding:9px9; /* all ie */
padding:8px ; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
The advantages and disadvantages of this way of writing are :