角中的浏览器兼容性问题怎么解决

　　介绍

小编给大家分享一下角中的浏览器兼容性问题怎么解决,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

<强> 问题 :边缘浏览器下,固定列的边框消失

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

位置:-webkit-sticky !重要; 　　位置:粘性!重要;

谷歌,火狐及webkit -内核的浏览器均支持该属性(css3),即不支持该属性,所以在IE中,会自动降级,表格无固定列,可滑动的形式。
边缘浏览器在1703年之后的版本使用了铬内核,对css3的属性支持较好,也支持粘性属性,可以使用,可以固定表格列,但边框会消失。

<强> 解决方案 :
目前可行的解决方案有如下几种:

    <李>不使用固定列,若产品没有明确要求使用固定列,可以放弃使用nzLeft及nzRight来固定表格,从而使各个浏览器下的展示效果一致。

    针对边缘浏览器降级处理,与IE浏览器效果一致,无固定列,整体可横向滚动。

    <李>自定义实现固定列,不使用组件的固定列实现,通过使用<代码>位置:绝对的,这种方式来实现表格的固定列。

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

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

。scroll-table { 　　宽度:100%; 　　overflow-x:滚动; 　　}

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

。固定餐桌{ 　　宽度:1300 px;/*可由th, td动态扩充,也可指定宽度*/border-collapse:崩溃; 　　}

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

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

& lt; p类=皊croll-table"比; 　　& lt;表类=癴ixed-table"祝辞 　　& lt; thead> 　　& lt; tr> 　　& lt; th>无效背景板& lt;/th> 　　& lt; th类=癴ixed-col"祝辞固定列& lt;/th> 　　& lt;/tr> 　　& lt;/thead> 　　& lt; tbody> 　　& lt; tr> 　　& lt; td>无效背景板& lt;/td> 　　& lt; td类=癴ixed-col"祝辞固定列& lt;/td> 　　& lt;/tr> 　　& lt;/tbody> 　　& lt;/table> 　　& lt;/p>

参考代码:Ironape

<人力资源/>

<强> 问题 :边缘浏览器的日历(nz-range-picker)确认按钮需要点两次

<强> 原因 :尚未明确

<强> 解决方案 :

    <李> <>强升级组件版本强,目前ng-zorro-antd 8.5之上的版本未见这个问题。 <李> <>强自定义页脚强,加入额外的页脚,来替代确定功能,此时有两种方式来实现:
    只覆盖对应的按钮,如确定按钮,此时按钮的样式与默认的页脚按钮是不一致的,为保持一致,可以自定义样式,也可以直接使用默认页脚中按钮的样式,下例中选择直接使用组件库的样式:ant-calendar-ok-btn,第二步则是覆盖原来的按钮,可以使用绝对定位的方式来实现覆盖:
& lt; nz-range-picker [nzRenderExtraFooter]=皉enderExtraFooterTpl"比; 　　& lt; ng-template # renderExtraFooterTpl> 　　& lt; p> 　　& lt;按钮nz-button nzType=皃rimary"类=癮nt-calendar-ok-btn abs-right"祝辞确定& lt;/button> 　　& lt;/p> 　　& lt;/ng-template>

对应的css:

。abs-right { 　　位置:绝对的; 　　右:12 px; 　　上图:7 px; 　　z - index: 1; 　　不必:没有; 　　}

删除默认页脚,完全自定义实现页脚。此时需要删除原来的页脚,可通过:

::ng-deep .ant-calendar-footer-btn { 　　显示:没有; 　　}
这种方式删除默认页脚,此时额外的页脚不可使用绝对定位。 <人力资源/>

<强> 问题 :即浏览器下,在多个标签页中切换,echart所在容器高度坍塌

<强> 原因 :即浏览器下父元素不能动态调整高度(即通过子元素动态改变调整高度)

<强> 解决方案 :固定echart图表所在的容器高度

<人力资源/>

<强> 问题 :即浏览器下,初始化表单时,触发表单验证

<强> 原因 :这个是IE的问题,IE10 +实现了输入事件,但是触发的时机却是错误的,比如在占位符改变时,占位符的文字不是英语的时候就会触发,Edge15 +修复了这个问题,但是IE可能永远都不会修复这个问题。

角中的浏览器兼容性问题怎么解决