Browser compatibility to solve FF/IE6/IE7 background-specific CSS HACK_Experience exchange

Since the beginning of the Internet, the battle between browsers has never stopped. Of course, the hardest part is for web page developers. In order to meet user experience and usability standards, they have to work on multiple browsers for unified effects. I really hope that one day FF ​​can dominate the world, although now IE still dominates the world. In particular, the CSS compatibility of Microsoft's latest IE7 browser has indeed added a heavy new burden to some web page producers.
In order to have the same display effect across browsers, we have to use CSS HACK. Of course, in this article we only talk about the most commonly used IE6 and FF, as well as the CSS HACK of IE7 that may become mainstream in the future. As for the versions below IE6 that are OP and SF, I will not explain them in detail here. Novices will definitely gain something from reading this article, and experts can just pass by and read it, haha!

Option 1
First, let’s take a look at the following CSS code:

background-color:orange;
*background-color:blue!important;
*background- color:red;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Script Home-www.jb51.net css test</title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue!important; *background-color:red; } </style> <div class="bgc"></div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before execution]

Let me briefly explain how each browser understands these three attributes: Under FF, the 2nd and 3rd attributes are not recognized. If the second attribute is just added with !important, FF will definitely recognize it, but because there is an * in front, it is not recognized (only IE7 recognizes it) . So what it reads is background-color:orange;
Under IE7, although IE7 recognizes the first, second, and third attributes, !important means priority, so what it reads is *background-color:blue !important;
Under IE6, the second attribute is not recognized, but the first and third attributes are recognized. However, because the third attribute overwrites the first attribute, IE6 finally reads *background-color: red.

Option 2
First take a look at the following CSS code:

Copy code The code is as follows:

background-color:orange;   
*background-color:blue;   
_background-color:red; 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css test 脚本之家-www.jb51.net</title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue; _background-color:red; } </style> <div class="bgc"></div>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

下面我简单解释一下各浏览器怎样理解这三个属性：
在FF下，第2、3个属性FF不认识，所以它读的是background-color:orange;
在IE7下，第3个属性IE7不认识，所以它读第1、2个属性，又因为第2个属性覆盖了第1个属性，所以IE7最终读出的是第2个属性*background-color:blue;
在IE6下，这3个属性IE6都认识，所以3个属性都可以读取，又因为第3个属性覆盖掉前2个属性，所以IE6最终读取的是_background-color:red。

其中IE的读取属性一定要知道，这对初学者而言使用CSS HACK是非常至关重要的，浏览器读取属性是从上至下的，也就是说同样属性的设置最后一个读取到的才是在浏览器上显示的。此外在方案二种的“_”这是只有IE6才认识的，可见其大胃王的感觉。另外!important不同，它打破了从上至下的读取习惯，使用的是优先显示。而在上述两个方案中可以看出FF除了正规CSS书写和!important外其它都不认识，标准就是统一的。

在这里并不是怂恿大家鼓励使用CSS HACK，只是别看到其他人写的CSS代码中有这些HACK不知道是什么意思。毕竟用CSS HACK来解决浏览器间的兼容并不是长远方法，如果新版本浏览器的出现说不定会把你原来写的CSS HACK怎样，IE7就是个很好的例子。尽量达到零使用CSS HACK或者说少使用，因为好的布局结构是可以很好解决这些问题，这样的网站也大有人在。