Discussion on browser compatibility-(3) additional stone sorting

# Talking About browser compatibility issues-(3) organizing other issues # preface in addition to summing up the compatibility problems encountered in our actual projects, we also need to collect these problems through the network and other means, to broaden your horizons. Network solutions can be divided into two categories: one for a specific point, to solve a common BUG; the other for methods, solve the Problem of browsers in a specific version ##### example * the inconsistency between margin and padding in different browsers. The solution is generally '* {margin: 0; padding: 0;} ', in aliceui, It is '''body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin: 0; padding: 0;} ''' is a common problem, people with high sensitivity to location usually find. Of course, the first solution is actually included in the CSS of many projects or frameworks first, so it is easy to forget. * The Question of the gesture mouse cursor and pointer is uniformly added with pointer * DOCTYPE. We recommend using the HTML5 DocType * document. non-standard methods, such as all, use the w3c uniform getElementById and other methods * event issues, write a judgment function, and pay attention to the window parameter. event | e * IE6 has a lot of fixed code, [Stamp me] (http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html) * others, a lot. [Stamp me] (http://www.douban.com/note/163291324/) [Stamp me] (http://www.cnblogs.com/ilexcai/archive/2011/08/20/2147173.html) [Stamp me] (http://www.baidu.com/link? Url = UszW0Uoit0tAWTvxyg-krto7aZ2yiBUfjN5d8j3GuePZCWUzq6o5U4sDvS1wkKjKL0-bzJdprf7oJb-MVO-09K) ### a collection of ready-made compatibility solutions such as [alice] (http://aliceui.org/), for bootstrap [bsie] (http://www.bootcss.com/p/bsie) ### method ### css hack identifies the characteristics of different browsers and adds special symbols to CSS attributes to differentiate the performance of different browsers. Code :'''. myDiv {background: #000;/* IE9 +/chrome/FF black */background: # ff0000 \ 0;/* IE8 red */+ background: #00ff00; /* IE7 blue */_ background: # 0000ff;/* IE6 green */} ''' personal opinion, which has been mentioned earlier, html/css should be designed and developed based on w3c standards. Such webpages are basically the same in IE9 +/chrome/FF. Generally, IE678 requires special configuration. Other css hack there are many, do not give an example, [Stamp me] (http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html) can be ### prefix Each browser in the release of their own special attributes but not included in w3c standards, it will be distinguished by its own special prefix, common prefixes are as follows | prefix | applicable browser | ------- | -------- | '-ms-' | Microsoft IE series | '-moz-' | Mozilla FireFox | '-o -', '-xv-' | Opera series | '-webkit-' | webkit kernels such as Safari, Safari on iOS, Chrome, Android browsers | more common [Stamp me] (http://book.51cto.com/art/201203/323008.htm) ### note the unique features of IE, which can display the specific ** (X) HTML structure ** for different browsers. The structure is the biggest feature of this method, If you want to display different HTML structures for different browsers, for example, IE6, the upgrade prompt is displayed, it is best to use this method. 'Gt (greater than) ', 'lt (less than)', 'gte (greater than or equal to) ', 'lte (less than or equal )','! (Not operated) 'and the version number four digits after the decimal point. How to use [Stamp me] (http://baike.baidu.com/link? Url = e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWq), [Stamp me] (http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html) ### User-Agent this is more for javascript inside the judgment, in fact I do not recommend to use, here only to list. ### Attitude well, we have various methods to write different compatibility solutions for browser versions, but we should try to use the above skills as little as possible, repeat it again. * html/css should be designed and developed based on w3c standards. * It is indeed a browser BUG that can be used to handle bugs. In addition, for the difference in javascript, we recommend using the [Duck type] (http://scriptfans.iteye.com/blog/318821) ([Duck typing] (http://en.wikipedia.org/wiki/Duck_typing) Principle to judge. (In fact, css html is also available, but js will be more common) * flying, walking like a duck and screaming like a duck *, this method can not only deal with various shell browsers, it can also adapt to future browsers. # Reference http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.htmlhttp://baike.baidu.com/link? Url = e_gfkfZkbcGf4bsbv0deUt896ugUxuBMtGROUlzBUUO-DijglbTdrarYhcCTAuhbUpWdGmPom7lI7ayqicprWqhttp: // others