Using css hacker, I can divide browsers into three categories: IE6, IE7, and roaming; others (IE8 chrome ff safari opera, etc)
◆ Hacker recognized by IE6 is an underscore _ and a star number *
◆ Hacker recognized by Internet Explorer 7 is an asterisk *
For example, a CSS setting:
- Height: 300px; * height: 200px; _ height: 100px;
When the IE6 browser reads the height: 300px, it will think that the height is PX. When the browser continues to read, it also knows * heihgt, so when IE6 reads * height: when 200px is used, the conflicting settings of the previous one will be overwritten, and the height is considered as 200px. Continue to read, IE6 also knows _ height, so it overwrites the PX high setting and sets the height to PX;
IE7 and roaming are also the same as reading from a PX height setting. When they read * height200px, they stop because they don't know _ height. So they will resolve the height to 200px, and the remaining browsers will only recognize the First height: 300px; so they will resolve the height to 300px. Because the setting of attributes with the same priority and conflicting needs will overwrite the previous one, the writing order is very important.
Padding: 20px;/* Firefox, chrome, IE8, safari, opera, etc */
* Padding: 25px;/* IE7, IE6, travel */
_ Padding: 20px;/* IE6 */