pre标签内的ul出现异常高度的原因是什么？是否为预期行为？

核心原因 #

你遇到的问题本质是**pre元素的默认空白处理规则和ul块级元素的默认布局冲突**：

• pre的默认样式是white-space: pre，会严格保留内部的所有空白符（包括换行、缩进）。
• 当你把ul放在pre里时，ul作为块级元素，前后的换行、缩进都会被pre当作空白内容渲染，这就导致了额外的高度。

浏览器差异的原因 #

不同浏览器内核对这种「pre包裹块级元素」的边缘场景处理逻辑不同：

• Gecko（Firefox）和Blink（Brave）内核严格遵循pre的空白保留规则，会渲染这些额外空白，所以出现异常高度。
• WebKit内核（Safari、Epiphany）对这种非标准嵌套的空白处理更宽松，自动忽略了块级元素前后的无效空白，所以表现正常。

为什么display:flex能修复？ #

当给ul设置display:flex后，它从块级元素变成了flex容器，此时pre的white-space: pre规则对flex容器的空白处理方式发生了变化——浏览器不再将flex容器前后的空白符视为可渲染的内容，因此多余高度就消失了。

更合理的解决方案 #

既然你的需求是给列表用等宽字体，完全没必要用pre包裹ul，推荐以下两种更标准的做法：

1. 直接给ul设置等宽字体：

   ul {
     font-family: monospace;
     margin-block: 0;
   }
   h1 {
     margin: 0;
   }
   

2. 如果一定要用pre，可以修改其空白规则：

   pre {
     white-space: pre-line; /* 只保留换行，忽略多余缩进和空白 */
   }
   

   或者移除pre内部ul前后的所有空白（包括换行），比如写成：

   <pre><ul><li>sub1.example.com</li><li>sub2.example.com</li></ul></pre>
   

是Bug还是预期行为？ #

这不是浏览器Bug，而是你使用了非标准的HTML结构（pre设计用于展示预格式化文本，而非包裹块级列表元素），导致不同浏览器对这种边缘场景的处理出现差异，属于规范未明确约束的模糊地带。

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