关于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 无符号右移赋值操作
Apr 17 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
原生JS进行前后端同构
Apr 22 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 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
在字符串中把网址改成超级链接
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
python删除字符串中指定字符的方法
2018/08/13 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
python 实现音频叠加的示例
2020/10/29 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
Ejb技术面试题
2015/04/29 面试题
办护照工作证明范本
2014/01/14 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
销售员岗位职责
2014/06/09 职场文书
中秋节活动总结
2014/08/29 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
netty 实现tomcat的示例代码
2022/06/05 Servers