如何解决带浮动内容的button按钮出现无法检测的隐藏边框问题

修复方案 #

你无需替换button元素，只需给.nav-side-menu-item按钮类新增以下CSS规则即可解决隐藏边框、背景色漏显的问题：

.nav-side-menu-item {
  /* 清除移动端浏览器默认按钮原生样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 强制设置为块级元素，覆盖float触发的inline-block默认属性 */
  display: block;
  /* 统一盒模型计算规则，避免宽度溢出 */
  box-sizing: border-box;
  /* 修正基线对齐导致的上下隐性间隙 */
  vertical-align: top;
  /* 彻底清除默认边框相关属性 */
  border: 0 none;
  /* 处理内部float元素可能带来的高度计算偏差 */
  overflow: hidden;
}

另外建议你删除通用button样式里的height: 36px规则，避免和.nav-side-menu-item里设置的67px高度产生优先级冲突，进一步降低异常概率。

问题原因说明 #

1. 移动端WebKit内核浏览器默认会给<button>元素自带原生控件渲染规则，即使手动设置了border:none，部分场景下仍会存在隐藏的渲染间隙，appearance: none可以彻底关闭这套默认的控件样式逻辑。
2. 按钮内部元素使用float属性后触发的inline-block属性，会让按钮基于行框基线对齐，产生上下方向的隐性间隙，强制设置display:block配合vertical-align: top即可完全消除这类间隙。
3. overflow:hidden同时可以清除内部浮动带来的高度计算偏差，避免背景色显示范围和预期不符。

内容的提问来源于stack exchange，提问作者J-A-Brown