css hack 解决兼容的写法（CSS hack solves compatibility writing）.doc

css hack 解决兼容的写法（CSS hack solves compatibility writing） In solving the compatible method, want to set a unified standard, individual should take the following 3 points as the basic principle: Weigh the cost: in the browser after being eliminated, how to quickly clean out the useless code Maintenance: balance in resource cost and perfect the backward compatibility Read: saving, easy to remember Here the cost on the first, not to say that we are not willing to pursue perfection, but the pursuit of perfection, too deliberately may sometimes hinder our progress; in the cost, should be maintained and readable, this is crucial for the team, but the end result is to reduce the cost. To save the three principles, we take a look at the usual solution compatible writing (will attach list Hack in detail later): CSS Hack, a selector Opera / * * / @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body.Sofish{display:block;}} The advantages and disadvantages of this kind of writing is: Overall, a variety of advantages: HACK has clean useless code easy to recognize; Disadvantages: selector names do not remember; the amount of code (repeat write selector) Two, the CSS property Hack .sofish{ Padding:10px; Padding:9px\9 all ie; / * * / Padding:8px\0; / * * / ie8-9 *padding:5px; / * * / ie6-7 +padding:7px; / * * / IE7 _padding:6px; / * * / IE6 } The advantages and disadvantages of this kind of writing is: Advantages: easy to remember, less code Disadvantages: not comprehensive Three, IE notes --[if IE]IE only [endif]--!! ! --[if! IE]NOT IE [endif]--! The advantages and disadvantages of this kind of writing is: Advantage: safety; backward compatibility; easy maintenance Disadvantages: bad will increase the HTTP request; good code and Four, browser detection: JS/ backend judgment / / in the case of jQuery, to detect whether the IE6, plus the IE6 is class= If ($.browser.msie {$.browser.version = 6) $(div).AddClass (ie6); } The a