解决angular中的浏览器兼容性问题的方法介绍-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

angular中的浏览器兼容性问题怎么解决？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

相关教程推荐：《angular教程》

问题：edge浏览器下，固定列的边框消失

原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签：

1 2	`position: -webkit-sticky !important;` `position: sticky !important;`

谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。
Edge浏览器在1703之后的版本使用了chromium内核，对css3的属性支持较好，也支持sticky属性，可以使用，可以固定表格列，但边框会消失。

解决方案：
目前可行的解决方案有如下几种：

不使用固定列，若产品没有明确要求使用固定列，可以放弃使用nzLeft及nzRight来固定表格。从而使各个浏览器下的展示效果一致。
针对Edge浏览器降级处理，与IE浏览器效果一致，无固定列，整体可横向滚动。
自定义实现固定列，不使用组件的固定列实现，通过使用position: absolute;这种方式来实现表格的固定列。

第二个方案的详细过程如下：

使用p包裹表格，当表格宽度超过p宽度时，开启滚动：

.scroll-table {
  width: 100%;
  overflow-x: scroll;
}

针对表格，我们可以指定宽度，让其超过外层p宽度（这样可以看到滚动效果）。

.fixed-table {
  width: 1300px; /* 可由th，td动态扩充，也可指定宽度 */
  border-collapse: collapse;
}

最后一个最核心的问题，就是固定列的实现了，非常简单，将表格的一列设置成绝对定位,在设置了绝对定位后，该列会脱离原来的文档流，表格少了一列，所以需要加一个背景板来保证表格能够给这个固定列留出一个位置。

HTML代码大致如下，这个fixed-col可以为固定列的样式，也可以设置成背景板的样式，demo中是用其指定了固定列的样式。

<p class="scroll-table">
    <table class="fixed-table">
        <thead>
            <tr>
                <th>无效背景板</th>
                <th class="fixed-col">固定列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>无效背景板</td>
                <td class="fixed-col">固定列</td>
            </tr>
        </tbody>
    </table>
</p>