About browser compatibility-(2) Understanding and accumulation of solutions

# About browser compatibility-(2) Understanding and accumulation of solutions # preface [previous article] ( http://www.cnblogs.com/p2227/p/3593087.html In addition to the correct view, we also need to accumulate solutions. Of course, IE does not have open source code, so there is a lot of content that can only be recorded. It is easy to remember and avoid it in advance. # [HTML/CSS] Name (chou) Yang (ming) Day (yuan) (bo) IE6 double margin question ### I think there are a lot of articles on this issue on the Internet, and there are also a lot in the garden, [Stamp me] ( http://www.cnblogs.com/YAOXI/articles/1691265.html ). These are mostly solved from the perspective of "known issues", but our browser will not tell you in the alert box when it finds the problem: there is a IE6 double margin BUG! When facing the problem positively, we only have a phenomenon. This BUG is very common. ** the layout of the interface in other browsers is good, and elements in IE6 are squeezed down **. If this problem occurs, consider this BUG. Of course, it will be better to avoid it in advance. ### Solution (simple) * 'display: inline; '*' _ margin: Half margin; '## [HTML/CSS] IE6PNG transparency ### think * gif can also be transparent, but it can only be transparent or fully transparent. It cannot provide a translucent solution based on alpha values, while png can be processed, the hateful IE6 does not directly support png transparency. * Required Transofrm {background: url (.. /images/index2q/bg_title.png) no-repeat; _ background: none;/* solve the problem that IE6PNG cannot be transparent */_ filter: progid: DXImageTransform. microsoft. alphaImageLoader (src = ". /images/index2q/bg_title.png ");/* solves the problem that IE6PNG cannot be transparent. Pay attention to the location of the png file relative to the HTML file */} ''' [DEMO] ( http://gh.p2227.com/demo/BrowserCompatibility/IE6PNG/ ) ### Extension * This solution only targets the background. According to the semantic HTML thinking, if the image is just a foil, the background should be used. If the topic to be expressed in this article is an image (such as a photo album) therefore, img * must be used for each image. The path in the filter must be different from the HTML file. * more solutions: [Stamp me] ( http://www.w3cfuns.com/thread-297-1-1.html ) ## [HTML/CSS] title attribute behavior ### problem and solution here I will refer to my previous article http://blog.csdn.net/p2227/article/details/7587641 It is detected that only IE8 has serious problems. Because the code is directly copied from IE8's F12, it will be a bit nonstandard. ### Extension this is a very detailed problem, but the front-end is to grasp the details and capture the user experience. # [HTML/CSS] Text stroke (filter VS CSS3) ### think about the new attributes of many CSS3, which can be processed with filters in the IE678 era, taking the stroke 'text-shadow 'as an example, we can use the 'glow' filter to process it ### solution [Stamp me] ( http://gh.p2227.com/demo/BrowserCompatibility/glow/ ) ## [Javascript] comma processing ### in IE678, the last comma of the array or JSON will be interpreted as undefined, and will be ignored by other browsers according to W3C standards. ### [Optimization solution] ( http://www.cnblogs.com/p2227/p/3541162.html ), Using the regular expression ', \ s * [\ r \ n] [\ r \ n] \ s * \} 'search for the relevant code in the project source file [DEMO] ( http://gh.p2227.com/demo/BrowserCompatibility/JSONComma/ ) ## [Javascript] location jump and return false ### in IE6, if the ''element is bound to a DOM Event and there is a jump in the event, in addition, if href is written as javascript: void (0), the return false redirection takes effect in the event. This problem does not occur if href is written. However, 'href = "#" 'is used to jump to the top of the page, so ** javascript: void (0) + dom Event + redirect, 'Return false' is more perfect. This issue is very detailed. Go directly to [DEMO] ( http://gh.p2227.com/demo/BrowserCompatibility/IE6Location/ ) Is easy to explain # To be continued, the browser will explain a lot of HTML, CSS, and Javascript content, and it will be difficult to complete it all at the moment. It will be further corrected and added later. My plan is to have four articles to explain about browser compatibility-(3) about browser compatibility-(4) tools and debugging # reference http://www.w3cfuns.com/thread-297-1-1.html Http://www.jb51.net/article/26453.htmhttp://wenku.baidu.com/link? Url = Usfi_LRVUz9JxgcMqazT4yre8OJOCYD9dhFhHpSlPqEEAYyAEr_knIS6Na93CjBSd85-o0YH9RjacgIAteBNd2SSUQus_cNKNCORCRoEtb3http: // www.cnblogs.com/duan?jian/archive/2012/09/23/2699119.html