Summary of CSS hack beginners

Source: Internet
Author: User
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 */}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.