Home  >  Article  >  Web Front-end  >  Before reaching the realm of no H and no F ~ I still have to suffer ~ I am compatible with the CSS of the browser_Experience exchange

Before reaching the realm of no H and no F ~ I still have to suffer ~ I am compatible with the CSS of the browser_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:10:091362browse

It is frustrating to face multiple browsers with different parsing, and it is something that everyone who writes CSS will encounter.
Although conditional comments are an ideal approach, they are forward and backward compatible. Unfortunately, I don’t really like N versions of CSS.

Let me talk about my own usage first.
Initialize
Selectors{}
to ensure backward compatibility,
Let’s start Filter
Regardless of whether IE6 has introduced Quirks Mode
, use
* html Selectors{}
to process IE6 and below versions.
I have made a more complicated distinction between the lower and lower versions. deal with.
Use to read IE5.x

@media tty {
i{content:"";/*" "*/}} @import 'ie5x.css'; /*";}
}/* */

Only used under special requirements, because IE5 is similar to IE5.5 in many aspects.
But IE5 will always be the same. Relatively stupid,
I have to make a further distinction, using

*>html Selectors{}

should be
*>html body Selectors{}
Compare It is easier to deal with the issue of priority.

IE7’s support for CSS is close to that of browsers such as FF, Opera, and Safari. However, there are always some special problems.
I choose to use
*+ html Selectors{}
to deal with IE7 specifically, but when IE7 also introduced Quirks Mode, the problem became very complicated, and his understanding of CSS also dropped to IE5. It is very similar, but there are differences. I don’t think so. I found a solution, so I refused to introduce Quirks Mode to IE7.

FF is not standard. Sometimes there are special problems.
I tried it with private stuff.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://www.loaoao.com") {
Selectors{ ... !important}
}

How about Opera? Although it passes ACID2
but in my boring way of writing, there are still problems like this li:hover+li {} I don’t know. Will this release version solve the problem?
Fortunately, others have provided it

@media all and (min-width: 0px){
Selectors{}
}

Safari What? Please forgive me for being poor. I don’t have money to buy Apple products.
I don’t know how many problems will occur. This is the most depressing thing. Fortunately, Safari supports standards very well.
More For multiple filtering methods, please refer to http://centricle.com/ref/css/filters/


Whether you use hacks or filters, it is painful
Solving today’s problems is not to produce tomorrow

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn