今天在开发时遇到一个问题,如题目所示,起初毫无头绪,以为是元素适配的问题,或者下方有遮挡,但是定位元素后发现并不是上述问题。
图中所示为两个 button 按钮,在 iOS 和其他安卓手机中均显示正常,但是在 vivoplay6 中下方边框消失。
button 是一个行内元素,这里简单介绍一下什么是行内元素:
- 设置宽高无效
- 对 margin 仅设置左右方向有效,上下无效;padding 设置上下左右都有效,即会撑大空间
- 不会自动进行换行
下边框不显示问题是因为 button
为行内元素,给其添加属性 display: inline-block
即可解决上述问题。