Today, I want to write about one of the most common problems for new users in website creation: browser compatibility. As a matter of fact, this problem is not only encountered during the learning process of new users. Even senior front-end programmers often have a headache. The reason is very simple. Although W3C has put forward a set of standards, browser vendors often do not fully follow the standards. In this case, Microsoft is the most amazing representative, and each generation of IE has its own characteristics, the problem exists not only in IE, but also in other browsers. As the most difficult front-end developer, you have to pay attention to these issues.
Browser compatibility problems mainly come from two aspects: css style compatibility and javascript script compatibility. This point has been briefly mentioned in the previous articles on this site. There are as many questions as I can say in a few hundred words. There are a lot of such blogs on the Internet, and there are usually dozens of articles, which may not be completely covered, I can only briefly introduce some principle points of attention, which can help improve the browser compatibility.
Css compatibility problem: the number of browsers is too large. We can only divide them based on the kernel. In this way, the mainstream browsers mainly have three kernels: microsoft's trident kernel, FF's mozilla kernel, and chrome represent the webkit kernel. Among them, Microsoft has another problem: Although IE6, 7, 8 and so on are a series of kernels, there are different interpretations of css. In general, as long as the browser passes the test, the general problem is not big. IE6 is probably the most widely talked about here, and Microsoft's IE6 is indeed a masterpiece in the browser field, I asked myself that most of the time I was able to make IE7 and FF and webkit perfectly compatible styles without relying on hack. Only IE6 will often surprise me, therefore, to ensure IE6 compatibility, you must understand css hack, mainly for the "_" hack method of ie6. As long as you write well, other browsers do not need to be differentiated, rather than "*". no! Important: the trick is that I mentioned in the beginner css note that I have previously written. It is developed based on FF or webkit, when the two styles are correct, IE7 and later generally do not have any major problems. Also, do not rely too much on the browser for automatic processing. This is really unreliable. If it is not necessary, do not use the automatic high width mode. Try to limit the height and width of elements in the page, so that you can handle css style compatibility issues to the maximum extent.
Javascript compatibility problem: this is also a very troublesome source. The main problem is still caused by the difference between the IE browser series and other browsers: IE calls system components, other browsers call their own built-in components, which causes you to call different components for different browsers. The most typical aspect is ajax. However, there are also many problems between other browsers. The problems I have seen are: the representation of RGB values is different, and the values retrieved from offsetleft are different, the readystate explanation mentioned in the previous article is different. A considerable number of javascript problems can be solved by some script plug-ins such as jquery. However, to be improved, we need to perform detailed tests on different browsers.
This article is just a simple description of browser compatibility. In general, the compatibility problem of Web browsers that I have encountered comes from these two aspects. If you have encountered the same problem, you may wish to refer to the ideas in this article for troubleshooting. Of course, it depends more on experience accumulation.
This article has been posted by youtao Ju http://www.utaoju.com, reprint please with the link