浏览器兼容之layui分页组件

vlambda
2020-01-15

浏览器兼容之layui分页组件

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

在chrome和firefox中的表现：

图１－chrome中渲染结果

浏览器兼容之layui分页组件

图２－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中查看兼容结果

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

vlambda博客
学习文章列表