为何自定义方形按钮在iOS Safari显示为宽矩形，桌面Safari正常

核心触发原因 #

这个异常是代码写法漏洞与移动端WebKit默认控件规则共同作用导致的，具体可以拆为三个可直接定位的问题点：

• 内联样式存在无效写法，被浏览器直接丢弃
  你在JS中设置按钮高度的代码为btn.style.height = 'px'，属性值缺失实际数值，属于完全无效的CSS赋值，所有浏览器都会直接忽略这个设置，让按钮回到默认渲染状态。
• iOS WebKit对表单控件有强制的最小尺寸兜底规则
  即使你添加了-webkit-appearance: none清除原生外观，iOS Safari依然会给button类元素保留适配触控的默认最小宽度，这个默认值是按苹果人机交互指南的44px最小触控热区计算的，优先级高于你没写对的尺寸属性，直接把按钮撑成宽矩形。
• 原生控件的默认样式没有完全重置
  原生button自带默认的左右内边距（iOS端通常为左右各12px），加上默认的content-box盒模型计算逻辑，就算写对了width值，实际渲染宽度也会叠加内边距、边框的尺寸，进一步放大宽度偏差。

修复方案 #

按照下面的步骤调整代码，就能在iOS端实现和桌面端一致的方形按钮效果：

1. 修正JS里的无效高度赋值
   把原来缺失数值的btn.style.height = 'px'改成和宽度匹配的有效值，比如和25px的width对应，就设置btn.style.height = '25px'；同时把原来设置的lineHeight: '0px'调整为和高度适配的有效值，避免因0值行高触发浏览器自动重置行高的逻辑。
2. 补全CSS中的原生样式重置规则
   给按钮类补全以下配置，覆盖iOS端的默认控件样式：

   .paletteButton {
       display: inline-block;
       border: 1px outset black;
       cursor: pointer;
       -webkit-text-stroke: 1px white;
       -webkit-appearance: none;
       /* 新增的重置规则 */
       box-sizing: border-box; /* 让width/height包含边框和内边距尺寸，避免计算偏差 */
       padding: 0; /* 清除按钮默认的内边距，避免撑大尺寸 */
       min-width: 25px; /* 覆盖iOS默认的最小宽度限制 */
       min-height: 25px; /* 覆盖iOS默认的最小高度限制 */
   }
   

注意：如果你设置的按钮视觉尺寸小于44px，iOS端依然会按系统要求保留44px大小的可点击触控热区，只是视觉上会正常显示为你设置的方形，不会再出现被拉宽的渲染异常。

内容的提问来源于stack exchange，提问作者Chewie The Chorkie