element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）_element select 在火狐浏览器中下拉框内容展示不全问题-优快云博客

本文链接：https://blog.youkuaiyun.com/miem_yang/article/details/118970766

本文介绍了如何在项目中使用Element UI的el-scrollbar组件时，隐藏横向滚动条以避免在Firefox下Select下拉框显示问题。通过添加!important，确保了在火狐中的正确显示，并提到了针对页面局部样式调整的方法和可能影响范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条
下面展示一些 内联代码片。

// 隐藏横向滚动条
.el-scrollbar__wrap {
	overflow-x: hidden;
}
// 竖向
.el-scrollbar__bar.is-horizontal {
	height: 0 !important;
}

因为有以上设置所以导致在火狐浏览器的时候最后select 下拉框最后一行总是显示不完全所以解决方法如下
下面展示一些 内联代码片。

.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
	overflow: scroll!important; // 记得加上!important
}

友情提示：1、以上涉及element ui的元素css在改动的时候请不要写在 sass · 或者 less里面建议直接在下面重新写一个style标签。
2、!important 记得一定加上否则可能会导致不生效。
3、这种修改会涉及所有用到的同样的标签即a和b页面都用了select 对a页面的select样式做了修改同样会影响b页面的select样式
4.如果不想影响全局可以使用/deep/ 博客另一篇文章有写附上链接
https://blog.youkuaiyun.com/miem_yang/article/details/119638729
下面展示一些 内联代码片。

// 举个栗子
<style lang="less" scoped> </style> // 里面写本页面的css
<style> </style> // 里面写原生要修改的css