Summary of CSS hack beginners

What is a browser hack: When we use different browsers (Firefox, IE7, IE6, IE 8, Safari, opera, Chrome) to access the same website or page, some incompatibility problems may occur, some display is normal, some display is not normal, we will be very annoyed when writing CSS, just fixed the problem of this browser, but another browser has a new problem. However, hack is a method that allows you to write independently in a CSS file to support styles in different browsers. This is harmonious. Haha! The first hack, ie FF all browsers are public (not actually hack) Height: 100px; the second hack IE6 dedicated _ Height: 100px; and the third hack IE6 IE7 public * Height: 100px; after introducing these three hack, let's take a look at how to define an IE6 IE7 FF dedicated hack for an attribute in a style. See the following Code , The order cannot be wrong: Program Code Height: 100px; * Height: 120px; _ Height: 150px. Below I will explain how browsers understand these three attributes: In ff, 2nd and 3 attributes FF are not recognized, so it reads Height: 100px. In IE7, the third attribute IE7 is not recognized, so it reads 1st and 2 attributes, because the second attribute overwrites the first attribute, IE7 eventually reads 2nd attributes * Height: 120px. in IE6, all three attributes are recognized by IE6, therefore, all three attributes can be read. Because the third attribute overwrites the first two attributes, IE6 eventually reads the third attribute. Built-in and external CSS hack writing External :. main {float: Left; # Float: none; _ float: none; html *. main {float: Left; # Float: none; _ float: none;} * + HTML. main {float: Left; # Float: none; _ float: none;} * HTML. main {float: Left; # Float: none; _ float: none;} * 1st lines for Firefox and other browsers * 2nd lines for Safari/IE6/IE7, if the visual effects of safari, IE6, and IE7 are not uniform, you need to follow the definition * 3rd lines of IE6/IE7 to IE7 * 4th lines to IE6 and older versions to see built-in :. main {float: Left; # Float: none; _ float: none; [float: none;] float: none ;} * For Firefox and other browsers, view * 1st plus # Float for IE7 * 2nd plus _ float for IE6 and older versions * 3rd plus [the float of * 5th plus] is shown to IE. Only hack recognized by Safari and opera @ Media all and (min-width: 0px) {/* safari and opera rules here */} Or @ media screen and (-WebKit-Min-device-pixel-ratio: 0) {/* safari and opera rules here */} Note: safari and opera refer to the latest version. Only hack recognized by Firefox 3 and IE7 Selector, X:-moz-any-link, X: Default {/* Firefox 3 and IE7 rules here */} usage example: in @ media screen and (-WebKit-Min-device-pixel-ratio: 0 ){. box {width: 100px;}/* safari and opera rules here */}