Solve the hack syntax for CSS compatibility of IE6, IE7, IE8, and Firefox [record it and you can use it later]

 

Solve the hack writing of CSS compatibility in IE6, IE7, IE8, and Firefox

The biggest headache for every CSS adjustment is the browser correction problem, because each browser has different interpretations of CSS. Firefox itself is more disciplined and easier to handle, however, when you encounter Microsoft's ie series, the headers are big. Although they are all Internet Explorer, they have different interpretations of CSS in IE6, Internet Explorer 7, and Internet Explorer 8 versions. Even if you have made adjustments in IE6, however, IE7 looks different, so we have to set different values for each browser to solve the layout shift problem. There are manyCSS hackTeaching articles, of course, there are also a lot of ways to deal with, next we want to tell you is a relatively simple method, but the following schools cannot pass W3C detection, although not through detection, however, correction is effective for various browsers! At present, the majority of browsers belong to Internet Explorer 6. This is mainly because XP has built Internet Explorer 6, and many users like to refill xp. Therefore, Internet Explorer 6 still occupies more than half of Internet browsers, however, with the emergence of Windows 7, there is a great opportunity to solve IE6, because Windows 7 itself is built into IE8, and Microsoft's IE8 interpretation of CSS has become increasingly standard, of course, the standard level is still less than Firefox. In addition, if you want to solve the compatibility problem of IE browsers of different versions, you must have ie browsers of different versions for browsing. However, the Microsoft operating system does not allow multiple versions of IE to coexist, to enable multiple Internet Explorer versions on your computer, download ietester! In addition, do not forget to download Firefox to correct CSS on the webpage! -------------------------------- I am a separation line -------------------------------- Differences between IE and Firefox [Identifier ]:「\ 9」 [Example exercise ]: # Tip { Background: Blue;/* the Firefox background turns blue */ Background: Red \ 9;/* the background of IE6, IE7, and IE8 changes to red */ } [Description]: Internet Explorer can understand "\ 9", but non-ie browsers cannot understand it. Therefore, you can use this syntax to distinguish IE and Firefox (non-ie browsers, such as opera, Google Chrome, and Safari). Therefore, in the CSS examples above, non-ie browsers show blue backgrounds, While IE browsers show red backgrounds. -------------------------------- I am a separation line -------------------------------- Differences between IE6, IE7, IE8, and Firefox [Identifier ]:「\ 9」,「*」,「_」 [Example exercise ]: # Tip { Background: Blue;/* the Firefox background turns blue */ Background: Red \ 9;/* The IE8 background turns red */ * Background: black;/* The IE7 background turns black */ _ Background: orange;/* change the IE6 background to orange */ } [Description]: The Internet Explorer series can read "\ 9", Internet Explorer 6 and Internet Explorer 7 can read "*", and Internet Explorer 6 can recognize "_" (bottom line ), therefore, you can write it down in order, so that the browser can correctly read and understand the CSS syntax, therefore, you can effectively distinguish ie versions from non-ie browsers (such as Firefox, opera, Google Chrome, and Safari ). -------------------------------- I am a separation line -------------------------------- Difference between IE6, IE7, and Firefox (method 1) [Identifier ]:「*」,「_」 [Example exercise ]: # Tip { Background: Blue;/* the Firefox background turns blue */ * Background: black;/* The IE7 background turns black */ _ Background: orange;/* change the IE6 background to orange */ } [Description]: IE7 and IE6 can read "*", IE6 can read "_" (bottom line), but IE7 cannot read "_". Firefox (non-IE browser) "*" and "_" cannot be identified at all. Therefore, we can distinguish IE6, IE7, and Firefox by such differences, -------------------------------- I am a separation line -------------------------------- Difference between IE6, IE7, and Firefox (method 2) [Identifier ]:「*」,「! Important」 [Example exercise ]: # Tip { Background: Blue;/* the Firefox background turns blue */ * Background: Green! Important;/* The IE7 background turns green */ * Background: orange;/* The IE6 background changes to orange */ } [Description]: IE7 can identify "*" and 「! Important, but IE6 can only recognize "*", but cannot recognize 「! Important. Firefox can read 「! Important ", but cannot identify" * ". Therefore, we can effectively distinguish IE6, IE7, and Firefox by using these differences. Difference between IE7 and Firefox [Identifier ]:「*」,「! Important」 [Example exercise ]: # Tip { Background: Blue;/* the Firefox background turns blue */ * Background: Green! Important;/* The IE7 background turns green */ } [Description]: Firefox can recognize 「! Important, but cannot identify "*", while IE7 can understand "*" and "!" at the same time 「*」,「! Important, so you can separate IE7 and Firefox with two identifiers. -------------------------------- I am a separation line -------------------------------- Difference between IE6 and IE7 (method 1) [Identifier ]:「*」,「_」 [Example exercise ]: # Tip { * Background: black;/* The IE7 background turns black */ _ Background: orange;/* change the IE6 background to orange */ } [Description]: Both IE7 and IE6 can recognize "*", but IE6 can recognize "_" (bottom line), but IE7 cannot, IE7 cannot read the "_" feature to easily differentiate IE6 from IE7. Difference between IE6 and IE7 (method 2) [Identifier ]:「! Important」 [Example exercise ]: # Tip { Background: Black! Important;/* The IE7 background turns black */ Background: orange;/* change the background of IE6 to orange */ } [Description]: IE7 can read 「! Important; "but IE6 does not work, and the CSS read step is from top to bottom. Therefore, IE6 cannot be recognized when reading 「! Important directly jumps to the next line to read CSS, so the background color is orange. -------------------------------- I am a separation line -------------------------------- Difference between IE6 and Firefox [Identifier ]:「_」 [Example exercise ]: # Tip { Background: black;/* the Firefox background turns black */ _ Background: orange;/* change the IE6 background to orange */ } [Description]: IE6 can recognize "_" (bottom line), but Firefox cannot. Therefore, we can use this difference to separate Firefox and IE6 to effectively achieve CSS hack. -------------------------------- I am a separation line -------------------------------- CSS hack between IE6, IE7, IE8, and Firefox is probably the same as above. If you have any omissions or errors, please give them an indication! These CSS hack is a simple processing method that I have seen at present. Of course, if you do not care whether CSS has passed W3C verification, you only care about whether reading in different browsers is normal. In fact, the above CSS hack is very useful to you, because these CSS hack can solve the browser compatibility problem correctly if they are used properly.