How to deal with web bugs and compatibility issues under different browsers

Typically, when you write a webpage, you view the page and make adjustments through Chrome or the Firefox browser. When this is done, it usually appears as normal under the browser, and there are some bugs when opened in other browsers.

Common bugs are in the following categories:

1. The browser does not match the default initial values of some tags to cause display errors

   For example: IE does not recognize a:link tags, so when setting a tag property, use a {} instead of A:link {} to ensure that all browsers are recognized;

   Chrome for the non-specified font size of the Chinese character defaults think 12px, and Firefox is smaller than 12px, so the font size in each div is strictly defined;

   Different browsers have different default values for some colors, so these all need to be specified in CSS.

   
   

2. No writing <!doctype>

   The compatibility problems caused by different doctype are serious, so it is important to specify a type of doctype before writing the content. See <! for details. The role of doctype>.

   
   

3. Irregular writing, which causes different browsers to recognize inconsistencies

   such as IE 3 pixels margin bug: Two consecutive Div, the first to adopt the float, the second does not make provisions, then the IE display as two div side-by display, the middle of the 3px interval. So some front-end engineers directly use this to implement the element side-by-side display. But under other browsers, the second Div is under the first Div. The solution is to write the specification, and to achieve side-by-side display, two div will float.
   

   
   

4. Bugs in the browser itself (usually IE6 and below)

   Usually the bug is basically caused by the above 3 kinds of reasons, the real browser bug is very few. The following are common:

   A. Box model bug, solution use strict DOCTYPE statement

   B. Double margin bug (left floating element, left margin is defined twice times), solution uses _display:inline, only IE browser is recognizable, does not affect other browsers.

With the browser version of the update, the different browsers produced less compatibility, is a good phenomenon for developers.

Web bugs, how to handle compatibility issues under different browsers