下面是一份详细的“兼容各个浏览器的技巧”的攻略：

兼容各个浏览器的技巧

1. 重置样式

不同的浏览器有不同的默认样式，为了保证网页在各个浏览器中呈现的一致性，需要使用重置样式重置所有元素的默认样式。推荐使用normalize.css，它是一个广泛使用的重置样式库，提供了全面、标准的浏览器兼容性支持。

<link rel="stylesheet" href="normalize.css">

2. 浏览器前缀

不同的浏览器可能对同样的CSS属性使用不同的前缀，以添加浏览器私有的样式。比如，-webkit-前缀适用于Safari和Chrome浏览器，-moz-前缀适用于Firefox浏览器。可以通过使用适当的浏览器前缀使CSS属性在各个浏览器中保持一致。

.box {
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

3. JS 库

有些 JS 库自身就具有浏览器兼容性，直接使用这些库可以避免一些浏览器兼容性问题。例如，jQuery 是一个流行的 JS 库，对各个浏览器的支持十分广泛。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

4. 浏览器测试

测试是保证网页在不同浏览器上正确呈现的关键。可以使用不同的浏览器进行测试，并使用工具（如selenium）自动执行测试，以减少测试的时间和成本。

5. 兼容性表格

在开发过程中可以使用兼容性表格来记录每个元素/属性在各个浏览器中的兼容性。这样可以更好地了解哪些部分需要做兼容性处理，以及需要处理哪些浏览器的兼容性。

以下是一个兼容性表格的示例：

元素/属性	Chrome	Firefox	Safari	IE
border-radius	支持	支持	支持	不支持
box-shadow	支持	支持	支持	不支持
transform	支持	支持	支持	不支持

6. 参考文献

• normalize.css
• CSS Vendor Prefixes
• jQuery
• Selenium
• Can I Use

以上就是一份标准的“兼容各个浏览器的技巧”的攻略，希望可以帮助到你。