列表项缩进异常因summary与details默认行内/块级差异导致基线错位，需用flex包裹、分层控制::marker图标、调整vertical-align及清除换行符解决。

details内嵌

或

时为什么列表项缩进异常

因为

默认是inline-level元素，而

、

是block级容器，两者在流式布局中垂直对齐依赖line-height和vertical-align，默认值容易导致列表顶部与summary文字基线错位，尤其在设置font-size或padding后更明显。

常见现象：点击展开后，

第一项顶边“悬空”或“下沉”，看起来像漏了一行；或者列表符号（●、1.）与summary文字不对齐。
• 不要给
  设display: block后又用margin-top强行拉齐——这会破坏原生toggle热区
• 避免直接修改
  的margin-top，它可能被
  的渲染上下文重置
• 优先用flex微调：
  本身不支持flex，但可包裹一层

  再放

  用summary::marker + list-style控制三角图标与列表符号共存

  自带的折叠箭头（▶）由::marker生成，而

  的项目符号也走list-style机制，二者若同时存在且未隔离，Safari下可能出现双图标、重叠或错位。

  关键不是“去掉哪个”，而是“分层控制”：

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载

  • 禁用summary原生箭头：summary::marker { content: ""; }（Chrome/Firefox有效）
  • 对Safari补丁：summary { list-style: none; }，再用summary::before手动加图标（如content: "▶";）
  • 确保
    的list-style-position: inside或outside显式声明，避免继承summary的样式污染

  表格中details嵌套

  时td垂直对齐失效怎么修

  当

  …

  …

  放在

  里，

  常被挤到单元格底部或换行——根本原因是默认vertical-align: middle，但
  内容高度动态变化，浏览器无法稳定计算基线。
  • 给
    加display: inline-block，脱离table-cell的对齐约束
  • 给包含
    的设vertical-align: top，强制从顶部开始排列

    若需居中，改用display: table-cell + vertical-align: middle套在

    外层div上（注意：不能套在

    内部）

    禁用float和position: absolute——这两者会让

    失去toggle响应能力

    ul内含长文本换行后与summary间距突变

    展开后

    第一项文字自动折行，导致视觉上和summary之间多出一行空白。这不是margin问题，而是
    末尾的换行符（\n）被渲染为空格，叠加
    默认的top margin触发了行盒重排。
    • 删掉
      标签内的换行和缩进：写成<summary>标题</summary>，不要换行写
    • 给
      加margin-top: 0，并用padding-top: 0.5em替代，更可控
    • 若内容含

      或代码块，额外加<code>word-break: break-word</code>防撑破容器

    真正麻烦的是summary::marker在Safari中不支持content替换，且details[open]状态下的样式穿透不稳定——这些地方没JS兜底的话，只能靠@supports (selector(summary::marker))做渐进增强。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！