Safari浏览器中多行文本button样式异常交互不同如何解决？

问题根因 #

该差异是Safari浏览器内置<button>控件的渲染特性导致：当按钮内部文本超过1行（包括<br>强制换行、内容长度溢出自动换行两种情况）时，Safari会自动为按钮切换另一套默认内置样式，最终出现默认态偏暗、点击态变为深灰色的不一致表现。

解决方案 #

通过CSS清除Safari的原生按钮样式，手动统一定义所有按钮的基础样式和交互态样式即可，核心修复代码如下：

button {
  /* 清除Safari原生控件样式，是修复的核心 */
  -webkit-appearance: none;
  appearance: none;
  /* 统一定义基础样式，可根据需求调整为和Safari原生单行按钮一致的参数 */
  background-color: #f5f5f5;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  padding: 6px 12px;
  line-height: 1.5;
  font: inherit;
  cursor: pointer;
}

/* 统一点击态样式，和单行按钮的蓝色点击态对齐 */
button:active {
  background-color: #007aff;
  color: #ffffff;
  border-color: #007aff;
}

完整修复后示例 #

将上述CSS加入你的复现代码中，即可得到全按钮表现一致的效果：

<html>
<head>
<style>
button {
  -webkit-appearance: none;
  appearance: none;
  background-color: #f5f5f5;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  padding: 6px 12px;
  line-height: 1.5;
  font: inherit;
  cursor: pointer;
}

button:active {
  background-color: #007aff;
  color: #ffffff;
  border-color: #007aff;
}
</style>
</head>
<body>
  <button>Single-line button</button>
  <button>Multi-line<br/>button</button>
  <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</button>
</body>
</html>

内容的提问来源于stack exchange，提问作者Little Helper