Safari浏览器button元素writing-mode CSS属性失效问题求助

针对你遇到的问题：Chrome中button设置writing-mode: vertical-lr+rotate: 180deg显示正常，但Safari中Styles面板显示属性已应用，Computed面板却显示为horizontal-tb，所有writing-mode值均无效，这是Safari对原生表单控件的样式限制导致的，以下是几种可行的解决办法：

方案1：替换为div模拟按钮 #

Safari对button这类原生表单控件的CSS排版属性支持有限，改用div模拟按钮可以绕过这个限制，同时保证语义和交互性：

<div class="vertical-action-btn" role="button" tabindex="0">你的按钮文本</div>

.vertical-action-btn {
  height: auto;
  position: fixed;
  right: 0;
  border-radius: 0 12px 12px 0;
  padding: 12px 8px;
  z-index: 50;
  writing-mode: vertical-lr;
  rotate: 180deg;
  /* 模拟原生按钮样式 */
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  cursor: pointer;
  font: inherit;
}

/* 聚焦状态，保证可访问性 */
.vertical-action-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

const btn = document.querySelector('.vertical-action-btn');

// 点击事件
btn.addEventListener('click', () => {
  // 执行按钮逻辑
});

// 支持回车/空格触发点击，符合按钮交互规范
btn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    btn.click();
  }
});

方案2：添加-webkit前缀并修改display属性 #

尝试给writing-mode添加webkit前缀，同时修改button的display类型，强制Safari应用排版样式：

button {
  height: auto;
  position: fixed;
  right: 0;
  border-radius: 0 12px 12px 0;
  padding: 12px 8px;
  z-index: 50;
  display: block; /* 或inline-flex */
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  rotate: 180deg;
}

原因说明 #

Safari对原生表单控件（button、input等）的渲染采用了特殊的引擎逻辑，优先使用系统原生控件样式，导致部分CSS排版属性（如writing-mode）无法正常生效，即使Styles面板显示属性已应用，也会被浏览器强制覆盖为默认值。

内容的提问来源于stack exchange，提问作者Cristina Lupu