Home > Article > Web Front-end > Solving the compatibility issues of IE5/IE5.5/IE6/FF——CSS_Experience exchange
reposted from blue ideal
author bias
original address http://www.blueidea.com/tech/site/2006/3296.asp
i found several different versions before the ie browser, which can be run independently, is just perfect for testing page compatibility issues. you won’t know until you try it. pages that work fine in ie6 and ff will become a mess in ie5 and ie5.5. i have always heard that ie5 is a "nail" in the creation of web standards, and now i have to believe it.
since there is a problem, let’s look for a solution. after searching on the internet, there are still many related articles. i think the most direct method is "ie conditional comments", which is very convenient. can write styles for different versions of ie. but this requires writing a style for each version, which is not conducive to file optimization.
after looking for some related css hacks, i think it should be possible to write the hacks of ie5/ie5.5/ie6/ff together. after testing, i finally found a good method. below we let’s see how to implement it:
everyone knows that using the !important statement can increase the application priority of specified style rules, such as the following example:
-------------- ----------------------------------
copy code the code is as follows:
e1{ background-color: red !important;/*提升优先权*/ background-color: blue; }
------------------------------------------------ ----
but there will be a problem when writing this way in ie. after reading my "about css style sheet priority" and "about css style sheet priority supplement", you will know that in using the !important declaration in ie6 and ff can increase the priority level, but the !important declaration in ie6 is not absolute and will be replaced by subsequent attribute definitions of the same name. that is to say, in the above example, ie6 applies the last background color value, which is "blue"; while in ff, the background color value is "red". based on this, we can separate the styles of ff and ie.
ok, the problems of ff and ie have been solved, now let’s solve the problem of ie itself.
after reading dudu's "another way to bypass ie6 and support ie5 - ie also supports ">"", i was inspired by this. is it really possible for ie to recognize it if i use ">"? let's look at an example:
---------------------------------------- ----------
E1{ background-color: red; >background-color: blue;
}
------------------- ----------------------------------
what you get in ff is the background color red, while in ff the background color obtained in ie is blue. according to the rules of style redefinition, if the browser can recognize ">", it should get a blue background. therefore, it can be known that ">" can only be recognized by ie. this is very important. it's important! everyone will know later. (note: i have tested some other symbols, such as "~", "`", "
------------------ -------------------------------
wouldn't this save a few bytes? ? that’s right, but hack is not a standard. if you abuse hack, it will only get further and further away from the standard!
the above is the content of css_experience exchange to solve the compatibility problem of ie5/ie5.5/ie6/ff. for more related content, please pay attention to the php chinese website (www.php.cn)!