Website design and browser compatibility problems and Solutions

For website design developers, in order to give users better online experience, to solve the browser compatibility problem is still a big challenge. And web design is a combination of technology and art, in the designer to consider the beautiful, but also consider notebook, tablet PCs and mobile phone compatibility issues, web design has shown new trends.

1 browser compatible with web page problems
As is known to all, the Internet is usually through the browser to achieve, the so-called browser is to display the web server or file system HTML file content, to ensure that users interact with the file. The kernel between different browsers is different, which leads to the same page in different browsers in the effect of differences, and even can not be displayed properly. At present, some website design has not been able to take into account the ability of various browsers, through a small number of browsers open web pages will appear deformation, can not access, display incomplete and pictures unchanged. For this problem, web developers to design a good site to be placed on different browsers to detect their compatibility, the emergence of different situations should be addressed by targeted methods.
Most web designers use CSS to deploy layouts. At present, CSS3 divides the CSS into different modules, the function is also continuously powerful, the homepage design is also more convenient, regardless of is the mainstream portal website or each kind of small company even the individual small station, also carries on the design through the CSS. Once, IE occupied the mainstream browser, but with the continuous development of Internet technology, various browser was blowout trend, such as Baidu, Sogou, 360 speed in its own browser, but also occupied a large market share, at the same time, Google, Firefox 3435, other browsers in the market occupies an important position. The kernel used by different browsers is different, which causes many web browsers not compatible, because the browser kernel is responsible for interpreting and rendering web pages syntax. Therefore, the browser's kernel is different, the interpretation of the web page syntax is also different, the same page in different browsers display is also different, this is what we call website design and browser compatibility issues. If the compatibility problem of web page and browser is not good, it may cause the browser to interpret the content of the web page error, appear garbled, deformation, information disorder and other phenomena, affect the beauty and use of the page.
2 solutions to the compatibility problems of web pages and browsers
2.1 using Hack technology to achieve browser compatibility issues
The so-called Hack technology is the use of CSS style different browsers support different features for different browsers repeat the definition of many different styles, from their analytical support to implement their own browser style, to design a different browser with the same display page. The most commonly used method is to use browsers to support the selection of special characters or individual styles, and not to define different styles repeatedly. A special display style of individual browser, if individual browsers have their own separate support hidden style, first for the most general browser definition style, and individual style after the hidden browser support separate duplicate definition of the style, the most browsers use the former browser specific hidden style cover after using the latter alone. If the individual browser does not support the most browsers use style, first for individual browser definition style, then the individual browser does not support the style for most browsers repeat the definition of the style, the individual browsers use the former, most browsers cover after using the latter.
2.2 inconsistent margins of different browsers
For example, in CSS write a margin - left:588px, after testing, people now IE8 and Firefox browser display the same effect, but IE6 display will be a problem, the main performance is that the margins will be a few pixels, which affects the beauty of the page. The reason for this phenomenon is that different kernel interpretations of web pages lead to different rendering mechanisms. Different vendors have different interpretations of CSS, and different versions of the same vendor may also have different interpretations. As mentioned above, the rendering of the same problem by IE7 and IE8 is different. In addition, browsers and CSS and versions have been dynamically updated, which is a factor that often causes the two to not be compatible.  To solve this problem, you can write different standards for different browsers.
When you do web design, designers are usually designed to implement different levels of menu settings. In some delicate web sites, if the mouse arrow is pointing to a navigation site, the arrow will display the hover effect. This kind of display is not a problem in IE7 and IE8, but it can't be compatible when it is opened by IE6. If IE6 is to achieve this effect, you must use JavaScript to write functions to assist the completion. This requires the creation of a hover.htc file that uses the JS script to define the style of the element. If hover is detected, the onmouseout and OnMouseOver events are set to the element to achieve the effect of hover. Since then, the use of hover in IE6 will not be a problem.