关于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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php+mysql实现无限级分类
2015/11/11 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
使用Python操作excel文件的实例代码
2017/10/15 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python 自定义装饰器实例详解
2019/07/20 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
会计实习期自我鉴定
2013/10/06 职场文书
企业统计员岗位职责
2013/12/13 职场文书
师范学院教师自荐书
2014/01/31 职场文书
车间机修工岗位职责
2014/02/28 职场文书
工程索赔意向书
2014/08/30 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书