Safari中<details><summary>的text-decoration:underline属性失效问题求助

问题原因 #

Safari对<summary>元素的渲染有特殊处理，其默认用户代理样式会干扰text-decoration属性的应用，即使添加-webkit-前缀也无法覆盖这种默认行为。

可行解决方案 #

• 方法1：将文本包裹在<span>内
  把<summary>里的文本内容放入<span>标签，然后为该<span>设置下划线样式：

  <details>
    <summary><span>折叠标题</span></summary>
    <p>折叠内容...</p>
  </details>
  

  summary span {
    text-decoration: underline;
  }
  

• 方法2：用border-bottom模拟下划线
  如果不需要严格的text-decoration特性（比如随文本换行），可以使用边框模拟下划线，兼容性更好：

  summary {
    border-bottom: 1px solid currentColor;
    /* 若需要行内显示，可添加 */
    display: inline-block;
  }
  

• 方法3：重置Safari默认样式
  强制覆盖Safari对<summary>的默认渲染规则，再设置下划线：

  summary {
    -webkit-appearance: none;
    display: block;
    text-decoration: underline;
  }
  

内容的提问来源于stack exchange，提问作者Dmitry Shashurov