vlambda博客
学习文章列表

浏览器兼容之layui分页组件

浏览器兼容问题对于web前端开发同学可算是一大痛点。很多伙伴都借助于前端框架绕道解决这一问题,但是框架也有疏忽哦,比如layui-page插件中的select 标签。
在chrome和firefox中的表现:

图1-chrome中渲染结果

浏览器兼容之layui分页组件

图2-fire-fox中渲染结果

很明显,在两个浏览器中渲染的结果差异很大,下面我们来调试以下,使得在chrome和firefox上展示的效果一样。

新建my-layui.css文件,样式内容如下:

.layui-laypage select { -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /* Removes Default Firefox style*/ background: url('../imgs/arrow.png') no-repeat; /*自定义select中的小图标*/ background-position: center right; /*设置小图标位置,可以使用px或%*/}

其中 arrow.png 是自定义图片,我使用的是:浏览器兼容之layui分页组件请注意,这是一张图片。由浏览器默认渲染的下拉图标不一样,我们定义一个同一个图标。样式和图片都已经准备好了,现在将样式文件引入页面。

浏览器兼容之layui分页组件

在chrmoe和firefox中查看兼容结果

图3-兼容后chrome渲染结果


图4-兼容后firefox渲染结果


调试环境:

   OS: deepin

    chrome: 版本 78.0.3904.97(正式版本) (64 位)

    firefox: Version 60.4.0esr (64-bit) 

    layui: 2.5.4

    

参考资料:

   1、change-default-select-dropdown-style-just-css(http://uplifted.net/programming/change-default-select-dropdown-style-just-css/)