关于angular浏览器兼容性问题的解决方案


Posted in Javascript onJuly 26, 2020

edge浏览器下,固定列的边框消失

问题 :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-table {
 width: 100%;
 overflow-x: scroll;
}

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

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

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

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

<div 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>
</div>

参考代码:Ironape

Edge浏览器的日历(nz-range-picker)确认按钮需要点两次

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

原因 :尚未明确

解决方案:
升级组件版本,目前ng-zorro-antd 8.5之上的版本未见这个问题。

  1. 自定义页脚,加入额外的页脚,来替代确定功能,此时有两种方式来实现:
  2. 只覆盖对应的按钮,如确定按钮,此时按钮的样式与默认的页脚按钮是不一致的,为保持一致,可以自定义样式,也可以直接使用默认页脚中按钮的样式,下例中选择直接使用组件库的样式:ant-calendar-ok-btn,第二步则是覆盖原来的按钮,可以使用绝对定位的方式来实现覆盖:
<nz-range-picker [nzRenderExtraFooter]="renderExtraFooterTpl">
<ng-template #renderExtraFooterTpl>
 <div>
 <button nz-button nzType="primary" class="ant-calendar-ok-btn abs-right">确 定</button>
 </div>
</ng-template>

对应css:

.abs-right {
 position: absolute;
 right: 12px;
 top: 7px;
 z-index: 1;
 box-shadow: none;
}

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

::ng-deep .ant-calendar-footer-btn {
 display: none;
}

这种方式删除默认页脚,此时额外的页脚不可使用绝对定位。

IE浏览器下,在多个tab页中切换,echart所在容器高度坍塌

问题 :IE浏览器下,在多个tab页中切换,echart所在容器高度坍塌

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

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

IE浏览器下,初始化表单时,触发表单验证

问题 :IE浏览器下,初始化表单时,触发表单验证

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

解决方案:

  1. 使用表单的reset()重置表单,但是重置的操作需要放在setTimeout中,或者通过其他手段将重置的操作作为表单初始化时的最后一个宏任务执行。这种方式经验证,最终的效果是,初始化表单后,表单输入元素的边框闪烁(红色)一下。
  2. 使用自定义的服务商插件(较为推荐),这种方式对原有代码的破坏性小(遵循了OCP原则),该插件是由DerSizeS提供的。只需要在对应的module中增加一个服务商即可
@NgModule({
 providers: [{
  provide: EVENT_MANAGER_PLUGINS, multi: true,
  useClass: UniqueInputEventPlugin, deps: [UNIQUE_INPUT_EVENT_PLUGIN_CONFIG],
 }] 
})
class MyModule {}

需要注意的是,插件需要自己添加到项目文件中(根据angular团队所说,这个插件修复了一个IE10或者IE11的bug,但是提交了太多的代码,这会给增加现有的应用的打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到FAQ里面,而不会把他并入框架),并在对应的模块中引用。

3.IE的输入框会因为placeholder为中文而触发表单验证,placeholder改变了也会触发表单验证,所以,有一个讨巧的方法, placeholder里面的内容写成英文形式(推荐) ,但这显然不符合中文产品的需求,而且这显然没有国际化。所以可以想办法绕过这一条,使用 HTML实体 (已验证,可行),Unicode编码(不可以)

总结

到此这篇关于关于angular浏览器兼容性问题的解决方案的文章就介绍到这了,更多相关angular浏览器兼容性问题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
php中给js数组赋值方法
Mar 10 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 #Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 #Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 #Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 #Javascript
vuex分模块后,实现获取state的值
Jul 26 #Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
全面解析JavaScript Module模式
Jul 24 #Javascript
You might like
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中 Lambda表达式全面解析
2016/11/28 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
经理职责范文
2013/11/08 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
导游实习生自荐书
2014/01/28 职场文书
幼儿教师工作感言
2014/02/14 职场文书
安全月活动总结
2014/05/05 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014企业年终工作总结
2014/12/23 职场文书
考博导师推荐信范文
2015/03/27 职场文书
2015年档案管理工作总结
2015/04/08 职场文书