错误: 促销广告横幅的动态高度变化导致布局偏移

□ 说明

在阅读文章页(如 " /编码-访问-准备/ " )时,嵌入式促销广告在不同赞助/促销之间动态地取而代之。 由于广告卡的内容长度和高度各有不同,每个横幅过渡都会导致显著的** Cumulative布局Shift(CLS)**,在用户阅读时突然推出或拉出下方的全部文本.

□ 复制步骤

1. 浏览任何包含内嵌内嵌的促销块的手册页面(如编码访谈准备)。
2. 滚动到一个可与文章文本相接可见的内置广告块的部分。
3. 等待临时轮换/过渡。
4. 随着广告容器的高度变化,注意下起跳的内容.

□ 预期行为

广告横幅容器应保持一贯的固定高度或在整个过渡期间保留最低高度( " min-hight " ),使自转横幅不会改变周围内容。

□ 录像

https://GitHub.com/user-attachments/assets/4d15bbc0-7223-4617-95dc-87265d13cc62

□ 建议修正

为内置促销卡设置一个一致的"小高"或固定布局容器来吸收广告之间的高度差异.

例如:

缩略语 . 集装箱 { 对齐项目:中心; . . . . . . . . 框大小:边框; . . . . . . . . 显示:弹性; 微高: 6.5雷姆; . . . . . . . . {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

准确的高度应当以最高的预期宣传卡为基础来防止内容变化时的布局变化.

□ 曾经

横幅高度在旋转时会发生变化,使下方的文章内容突然移动.

<img宽="1680"高="1050" alt="Image" src="https://GitHub.com/user-attachments/assets/fa0be7c9-d1ff-43d4-84c7-9a51ca1719ea"/.

□ 过后

应用CSS调整后,促销容器为不同的横幅变化保留了足够的空间,使周围的文章内容无法移动.

CSS 编辑后的视频

https://GitHub.com/user-attachments/assets/0dcbc01a-2677-4ee-8bee-2b63d09d20b1 页面存档备份,存于互联网档案馆.

□ 影响

这一变化应可减少文章/手书页面中的**CLS**,并提供更稳定的阅读经验,同时进行宣传横幅旋转.