angular浏览器兼容性问题解决方案.docxVIP

? ? ? ? ? angular浏览器兼容性问题解决方案 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 问题：edge浏览器下，固定列的边框消失 原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky !important;position: sticky !important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核，对css3的属性支持较好，也支持sticky属性，可以使用，可以固定表格列，但边框会消失。 解决方案： 目前可行的解决方案有如下几种： 不使用固定列，若产品没有明确要求使用固定列，可以放弃使用nzLeft及nzRight来固定表格。从而使各个浏览器下的展示效果一致。 针对Edge浏览器降级处理，与IE浏览器效果一致，无固定列，整体可横向滚动。 自定义实现固定列，不使用组件的固定列实现，通过使用position: absolute;这种方式来实现表格的固定列。 第二个方案的详细过程如下： 使用div包裹表格，当表格宽度超过div宽度时，开启滚动： .scroll