UOS专篇-zorro分页组件在uos系统浏览器运行省略号变形(处理)

200 阅读2分钟

uos系统对很多人来讲是个陌生的系统,更别提对它内浏览器的兼容了。很多在window开发很正常的现象,在uos就像着了魔般,样式出错、事件失效、加载顺序出错···特别对于那些,手上只有window开发环境,却要搞uos兼容的人,调试起来简直“欲仙欲死”。

或许有些人会使用虚拟机来模拟,但是经过笔者的经历,虚拟机对样式错误显示是可以展示出来,但是事件上,很多跟真实uos环境有差别,很多事件问题,运行的问题在虚拟机是可以实现的,结果败在了真实环境里。

这篇文章,就是分享笔者在处理zorro组件在分页页码显示异常的方法跟一些分析。

  • 这是uos下的360浏览器显示(uos下的浏览器都有问题)

image.png

  • 这是window下的显示(chrome浏览器) image.png

看上图可以看到,在uos系统下的浏览器显示,省略号三个点都“”出去了,看着有说不出的难受。

或许有很多机智的小伙子,就想到样式修改了,然后对下面图中样式一顿操作,反而效果不大。

image.png

那么,按笔者的经历来说说自己的解决方案吧

核心思路:替换掉它自带的···

可能有些小伙伴就想着使用js操作dom来修改了,但是兼容问题能通过样式修改的,就最好不要使用js修改,通过js修改往往可能带来很多意想不到的意外。

具体思路:将字体大小设置为0-添加after伪元素(content为...)-添加辅助样式调到中间位置

image.png

image.png

【然后就正常啦!!!】

写在最后:设置字体为0,使用::after 伪元素更换内容,是一个很好的更换内容思路