layui组件实现简单分页，浏览器兼容之layui分页组件

小君 2023-03-09 16:34:21 271

layui组件实现简单分页，浏览器兼容之layui分页组件.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 是自定义图片，我使用的是：新建my-layui.css文件，样式内容如下：图２－fire-fox中渲染结果很明显，在两个浏览器中渲染的结果差异很大，下面我们来调试以下

layui组件实现简单分页，浏览器兼容之layui分页组件(1)

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

在chrome和firefox中的表现：

layui组件实现简单分页，浏览器兼容之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分页组件(3)