EJS中forEach循环渲染的.box容器文本及尺寸逐次缩小问题排查

1. 相对单位（em）的叠加效应 #

如果你的.box或内部元素使用em作为尺寸单位，且.box自身设置了font-size，一旦循环时出现DOM嵌套错误（比如标签未闭合），每个子.box的字体大小会基于父.box的大小计算，导致尺寸逐层缩小。举个例子：

.box {
  font-size: 0.9em;
  width: 12em;
}

若后续.box被嵌套进前一个里，每个新.box的字体大小都是父级的90%，宽度也会跟着按比例缩小，最终呈现逐次变小的视觉效果。

2. DOM结构嵌套错误（最常见） #

检查你的EJS循环代码，大概率是标签闭合逻辑出错，导致后续.box被意外包裹在前一个.box内部。比如错误写法：

<% items.forEach(item => { %>
  <section class="box">
    <h3><%= item.title %></h3>
<% }) %>
  </section>

这种情况下，只有第一个.box是独立的，剩下的全部嵌套在第一个里面，结合CSS的继承规则，就会出现后续容器越来越小的问题。

3. CSS嵌套选择器的误触发 #

如果CSS里写了.box .box这类嵌套选择器，而DOM结构又出现了嵌套，后续的.box会匹配这个规则，被应用额外的缩小样式。比如：

.box .box {
  transform: scale(0.95);
  padding: 0.5em;
}

每多一层嵌套，就会触发一次这个样式，最终出现累积缩小的效果。

4. 动态样式计算异常 #

若你用了JS动态计算.box尺寸，或者CSS的calc()依赖父元素尺寸，循环时父元素的尺寸被前一个元素意外修改，也会导致后续元素尺寸异常。

快速排查方法 #

• 打开浏览器开发者工具（F12），切换到Elements面板，查看所有.box的DOM结构，确认是否存在嵌套。
• 查看每个.box的Computed样式，对比font-size、width、transform等属性，定位是哪个属性在逐次递减。
• 检查EJS循环的标签闭合逻辑，确保每个.box都是同级结构，没有嵌套。

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