1.什么是浏览器兼容性问题？
答：同样的代码，在不同的浏览器上显示的页面效果不一样。
2.造成的原因是什么呢？
答：浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。
主流浏览器：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)
3.为什么浏览器会存在兼容问题？
同一浏览器，版本越老，存在 bug 越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
不同浏览器，核心技术(内核)不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。

从浏览器内核的角度来看，浏览器兼容性问题可分为以下两类：

• 渲染相关：和 样式 相关的问题，即体现在布局效果上的问题。
• 脚本相关：和 脚本 相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。

所以浏览器兼容性问题一般指：css兼容、js兼容

如何解决呢？
标准化HTML，CSS和JS的语法和用法，严格按照W3C的规范编写代码，可以减少浏览器解析和渲染的差异，提高网页的兼容性。
同时可以使用浏览器兼容性检测工具：点我！我是链接！这链接可以可以检测一些常见的样式和方法在各大浏览器中是否兼容

1. 不同浏览器的标签默认的margin和padding不同？
解决方案：一般我们会引入reset.css样式重置；
这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外间距。

1. CSS兼容性问题

• 盒模型：不同浏览器对盒模型的解释可能不同。IE6/7采用的是怪异模式（quirks mode）下的盒模型，而其他现代浏览器遵循W3C标准模式。

  • 解决方案：设置box-sizing: border-box;来统一所有浏览器的行为。
  • 示例：
    * { box-sizing: border-box; }

• CSS前缀：某些CSS属性在不同浏览器中需要不同的前缀。

  • 解决方案：使用autoprefixer等工具自动添加前缀。
     

    .example { 
    -webkit-transition: all ⅓s ease-in-out; 
    -moz-transition: all ⅓s ease-in-out; 
    -o-transition: all ⅓s ease-in-out; 
    transition: all ⅓s ease-in-out; 
    }

• css3新属性，加浏览器前缀兼容早期浏览器
  
  -moz- /* 火狐浏览器 /
  -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
  -o- / Opera浏览器(早期) /
  -ms- / IE */

  
  哪些css3属性需要加：

  定义关键帧动画 @keyframes css3中的变形（transform）、过渡(transtion)、动画(animation) border-radius 圆角 box-shadow 盒子阴影 flex 弹性布局 ....

  
  .myClass {
  	-webkit-animation-name: fadeIn;
  	-moz-animation-name: fadeIn;
  	-o-animation-name: fadeIn;
  	-ms-animation-name: fadeIn;
  	animation-name: fadeIn;  /* 不带前缀的放到最后 */
  }
  /* 复杂属性 keyframes */
  @-webkit-keyframes fadeIn {
  	0% { opacity: 0; } 100% { opacity: 0; }
  }
  @-moz-keyframes fadeIn {
  	0% { opacity: 0; } 100% { opacity: 0; }
  }
  @-o-keyframes fadeIn {
  	0% { opacity: 0; } 100% { opacity: 0; }
  }
  @-ms-keyframes fadeIn {
  	0% { opacity: 0; } 100% { opacity: 0; }
  }
  /* 不带前缀的放到最后 */
  @keyframes fadeIn {
  	0% { opacity: 0; } 100% { opacity: 0; }
  }
  

• Flexbox和Grid布局：这些布局在旧版浏览器中支持不佳。

  • 解决方案：使用autoprefixer或postcss插件来添加必要的前缀，并考虑为不支持的浏览器提供回退布局。

    .container { display: -webkit-flex; display: flex; }

2. JavaScript兼容性问题

• 事件处理：addEventListener在IE8及以下版本中不支持。

  • 解决方案：使用条件分支来适配不同的浏览器。

    function addEvent(element, event, handler) { 
        if (element.addEventListener) { 
            element.addEventListener(event, handler, false); 
        } 
        else if (element.attachEvent) { 
            element.attachEvent('on' + event, handler); 
        } else { 
            element['on' + event] = handler; 
        } 
    }

• DOM操作：不同浏览器对DOM操作的支持可能不同。

  • 解决方案：使用库如jQuery来处理跨浏览器的DOM操作。
    $('#myElement').hide(); // jQuery隐藏元素

• ES6+特性：新的JavaScript特性在旧版浏览器中可能不被支持。

  • 解决方案：使用Babel等工具将ES6+代码转译为ES5代码。

    // ES6代码
    const numbers = [1, ˜, 3];
    const doubled = numbers.map(num => num * 2);

3. HTML5特性

• 新的HTML5标签：如<header>, <footer>, <article>等在旧版浏览器中可能无法识别。

  • 解决方案：使用html5shiv等脚本来让旧版浏览器支持HTML5标签。

    ​​​​​​​<!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <![endif]-->

• 表单控件：如<input type="date">在某些浏览器中支持不佳。

  • 解决方案：提供替代的JavaScript库，如pickadate.js。

  • <input type="text" id="datepicker"> 
    <script src="path/to/pickadate.js"></script>
    <script> 
        $(document).ready(function(){ 
            $('#datepicker').pickadate(); 
        }); 
    </script>

4. 媒体查询

• 响应式设计：某些旧版浏览器可能不支持媒体查询。
  • 解决方案：使用respond.js来为旧版浏览器提供媒体查询支持。

    ​​​​​​​<script src="path/to/respond.min.js"></script>

参考文章：
前端常见浏览器兼容性问题解决方案_js浏览器兼容问题怎么解决-CSDN博客

浏览器兼容性问题及其解决方案_浏览器兼容性问题怎么解决-CSDN博客