Safari（15.4前）不支持标准 appearance: none，需同时写 -webkit-appearance: none、-moz-appearance: none 和 appearance: none；对 number/date 类型还需额外处理伪元素、line-height、padding 及降级方案。
appearance: none 为什么在 Safari 里没反应
因为 macOS Safari（15.4 之前）根本不认 appearance: none，只吃 -webkit-appearance: none。就算你写了三端前缀，Safari 仍可能对 input[type="number"] 或 input[type="date"] 视而不见——它压根不把这类控件当普通 CSS 元素处理。
必须同时写全：-webkit-appearance: none、-moz-appearance: none、appearance: none；对 input[type="number"] 还得额外加：
::-webkit-inner-spin-button { appearance: none; }::-webkit-outer-spin-button { appearance: none; }-
-moz-appearance: textfield（Firefox 需设为textfield才真正剥离逻辑）
input 高度在 Chrome 和 Safari 里差几像素怎么调
不是你设错了 height，是浏览器对 height 的解析策略不同：Chrome 把 padding + border + 内容硬塞进固定高度里，Safari（尤其旧版）更倾向保留默认 line-height，结果文字贴顶或被截。
别用 height，改用 min-height 配合显式 box-sizing: border-box：
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
min-height: calc(1.5em + 0.75rem + 2px)（其中1.5em是行高基准，0.75rem是上下padding，2px是border） - 确保
box-sizing: border-box显式声明——Bootstrap 3 或手写样式表容易漏掉 -
textarea不响应line-height，得靠padding和min-height控制视觉高度
placeholder 文字在 Safari 里偏上、颜色太淡怎么办
::placeholder 在 Safari 中默认垂直对齐偏上，且颜色比 Chrome 浅得多；一旦你设了 line-height 或 height，问题更明显——这不是 bug，是各引擎对伪元素基线计算方式不同。
统一做法：
- 用
::-webkit-input-placeholder和::placeholder双写，颜色统一设为color: #666 - 避免单独设
line-height，改用padding控制上下空间 - 若必须居中，给
input包一层display: flex容器，用align-items: center
select 下拉箭头清掉了，但点击区域变窄了
appearance: none 只干掉样式，不帮你补空间。Safari 的 select 原生箭头占宽约 20px，清掉后若没补 padding-right，用户点不到右边区域，体验直接降级。
必须手动预留并重绘：
-
padding-right: 28px（留出图标+间距） -
background-image: none（Safari 可能残留原生箭头背景干扰尺寸） - 用
::after在select后插入自定义下拉图标，并绝对定位到右边缘 - iOS Safari 清掉
appearance后仍可能保留灰色背景，得加background: white和-webkit-border-radius: 0
最麻烦的其实是 input[type="date"]——Safari 根本不给你伪元素接口，也不响应多数样式，硬刚只会拖慢进度。真要统一，就降级成 input[type="text"] + JS 日期选择器，别赌它哪天突然支持。
