关于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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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中使用array函数新建一个数组
2015/11/19 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Python单例模式实例详解
2017/03/01 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
kali中python版本的切换方法
2019/07/11 Python
python解析yaml文件过程详解
2019/08/30 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
JNI的定义
2012/11/25 面试题
护理人员的自我评价分享
2014/03/15 职场文书
矿泉水广告词
2014/03/20 职场文书
买卖车协议书
2014/04/21 职场文书
民事授权委托书范文
2014/08/02 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS