浏览器兼容之layui分页组件

Posted 2021-04-30 小子宝丁

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

在chrome和firefox中的表现：

图１－chrome中渲染结果

图２－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 是自定义图片，我使用的是：（请注意，这是一张图片。由浏览器默认渲染的下拉图标不一样，我们定义一个同一个图标）。样式和图片都已经准备好了，现在将样式文件引入页面。

在chrmoe和firefox中查看兼容结果

图３－兼容后chrome渲染结果

图４－兼容后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/）