button上直接写min-height: 44px有时无效，因css重置可能将其设为inline，而min-height对inline元素不生效；需强制display: inline-block或block，并配合padding、box-sizing: border-box及min-width才能可靠保障44×44px触控区域。
button上直接写min-height: 44px为什么有时没反应
因为
检查开发者工具「Computed」面板里的display值，别只信 Styles 面板写的规则。如果确实是inline，强制加display: inline-block或display: block。
-
min-height本身对inline元素不生效，这是规范行为，不是 bug - 哪怕写了
!important，也救不回 display 错的按钮 - 移动端必须保证可点区域 ≥44px × 44px，仅靠文字撑高不够
用padding + min-height组合才是可靠方案
真正控制按钮最小高度，靠的是padding + min-height + font-size协同，而不是硬设height。
例如主操作按钮推荐这样写：
.btn-primary {
font-size: 16px;
padding: 10px 20px;
min-height: 44px;
min-width: 44px;
box-sizing: border-box;
}
-
padding扩展点击热区，比height更适应不同字数 -
min-height兜底防内容过少时塌缩，min-width防短文本过窄 - 必须加
box-sizing: border-box，否则padding会额外撑大总尺寸 - 避免用
height: 44px——它会卡死高度，内容溢出或换行时直接被裁剪
移动端点击反馈失效的隐藏原因
iOS 上按钮点了没反馈，大概率不是样式问题，而是缺失了两个关键声明：
-
-webkit-tap-highlight-color: rgba(0,0,0,0.2)：提供轻量级点击蒙层 -
touch-action: manipulation：告诉浏览器这是可点控件，启用快速点击优化
千万别写touch-action: none——这等于关掉所有原生点击逻辑，min-height再准也没用。
IE8–IE11兼容时别碰vh单位
如果你还得支持 IE，min-height: 44px是唯一安全写法。所有基于视口单位（vh、rem动态计算）的方案在 IE8–10 下要么不解析，要么继承异常。
IE9+ 虽支持vh，但min-height在嵌套inline-block中表现不稳定，降级方案就是放弃相对单位，回归像素值。
最常被忽略的一点：min-height受 CSS 优先级影响极大。哪怕你写了min-height: 44px，只要某处全局样式用!important覆盖了height或display，它就彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
