About browser compatibility-(4) tools and debugging

# About browser compatibility-(4) tools and debugging # preface about browser compatibility, new problems may occur even if more resources are accumulated. In this case, we need to debug and solve the problem (using tools. The following uses the width of a scroll bar as an example to describe this point. # In IE7 mode, some content is overwritten by the scroll bar! [Scroll bar problem] (http://images.cnitblog.com/ I /84053/201403/192333492714593.jpg) # solve the problem we want to use 'developer tool', ** layer by layer in order to find which element causes the problem **, is inside too big, or is the outside too small? In fact, I have already found out that the table element in the figure is a little bigger, and it is only a problem in IE7. Therefore, we can quickly add '+ table_list {width: 98%;} ', the problem is resolved. Why? I found [this blog] (http://blog.csdn.net/wgw335363240/article/details/7043861) and discussed the margin issue, but I didn't have margin in my code, so I did the test myself. Differences between width: 100% and width: auto [width: 100% test code] (http://gh.p2227.com/demo/BrowserCompatibility/debug/scrollBar.html) [width: auto test code] (http://gh.p2227.com/demo/BrowserCompatibility/debug/scrollBar-auto.html ):

In conclusion, IE6 is 100% in width and the scroll bar is missing, but the middle key can be rolled. in Visual View, the scroll bar is generated outside the table. IE7 is 100% in width. The scroll bar overlaps with the table, and part of the table cannot be seen; the IE8 width is auto, and the width is content-adaptive, not the width of the parent object. Use the following table to organize it. | width: 100% | width: auto | -- | IE6 | the scroll bar is appended to the scroll element. | the width is suitable, complete content display | IE7 | the scroll bar is superimposed on the scroll element, and the internal element width does not exclude the scroll bar | width is appropriate, and the content is displayed completely | IE8 | width is suitable, content display is complete | the width is subject to the content and does not adapt to the parent element | Note: IE9 and above are basically the same as IE8 at one point # better solution in summary, we use 'width auto' for IE67 and use 'width 100% 'for other cases is a better solution [Code] (http://gh.p2227.com/demo/BrowserCompatibility/deb Ug/scrollBar-hack.html) We face compatibility issues, on the one hand can be modified according to some basic principles and previous experience, on the other hand is the analysis of debugging, listing testing and new accumulation. In this way, ** discover-solve-think-and sort out ** can be used to find a better solution. # Reference http://blog.csdn.net/wgw335363240/article/details/7043861http://www.cnblogs.com/aaronjs/p/3565253.html