button文字颜色和大小应优先用css类而非内联样式，需处理disabled状态、浏览器默认样式、-webkit-appearance重置、white-space控制及移动端适配。
button 元素的 color 和 font-size 直接写内联样式就行
HTML 按钮文字颜色和大小，最直接的方式就是给 <button></button> 加 style 属性。它本质是行内元素（但默认 display: inline-block），文字样式规则和普通文本一样生效。
常见错误是只改了父容器的 color，忘了 button 有自己默认的样式重置逻辑，尤其在 Chrome/Firefox 中，button 会强制继承系统主题色或覆盖部分 inherited 样式。
-
color控制文字颜色，但注意：如果按钮有disabled状态，浏览器会自动压暗文字，此时需额外用button:disabled { color: #999; }覆盖 -
font-size生效没问题，但别设太小（比如10px），移动端点击区域可能不达标；iOS Safari 对小于16px的字体默认放大，反而导致布局跳动 - 避免只靠内联样式，建议抽成 class，比如
<button class="btn-primary"></button>，方便复用和响应式控制
用 CSS 类统一控制 button 文字样式更可靠
内联样式容易重复、难维护，尤其多个按钮要保持一致时。用 class 是更稳妥的做法，还能顺便处理边框、背景、hover 等连带问题。
典型场景：后台管理页里一堆操作按钮，需要统一字号、颜色、禁用态灰度。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
border: none或重置，否则不同浏览器的默认边框粗细/颜色不一致，会干扰文字视觉权重 - 记得加
cursor: pointer，否则某些情况下 hover 时鼠标不会变手型（特别是用了display: block后） - 如果按钮内容是图标 + 文字，用
line-height或padding控制垂直居中比依赖vertical-align更稳
示例：
button.btn-small { font-size: 14px; color: #333; background: #f5f5f5; border: 1px solid #ddd; padding: 4px 8px; }
button 文字被截断或撑开？检查 white-space 和 width
设了 font-size 后发现文字换行、溢出或按钮莫名变宽，大概率是 white-space 或宽度约束没配好。
常见错误现象：button 内容是“导出全部数据”，结果显示成“导出全…”，或者按钮高度突然变高。
-
white-space: nowrap是防止文字换行的首选，button 默认是normal，长文本会折行 - 如果按钮设了固定
width，又没配overflow: hidden和text-overflow: ellipsis，文字可能直接撑破容器 - 避免对
button设height，优先用padding控制高度，不然字体大小一变就错位
移动端点击无反馈？别漏了 -webkit-appearance
iOS Safari 和旧版 Android WebView 会给 button 加一层原生样式包裹，导致自定义 color 或 font-size 在某些机型上不生效，甚至点击时没有视觉反馈。
这不是 bug，是 WebKit 强制渲染逻辑。绕过它的关键就一个声明：
- 加
-webkit-appearance: none可以剥离原生样式，让所有 CSS 完全生效 - 但加了之后，必须手动补
border、background、outline（否则 focus 时没焦点框） - 别只写
-webkit-appearance，现代写法应补全：appearance: none; -webkit-appearance: none;
这事容易被忽略——开发时在桌面 Chrome 看着好好的，一上真机就发现文字颜色发灰、点不动、或者字号没变。
