【问题标题】:How to Solve Cumulative Layout Shift Caused by Announcement Bar?如何解决公告栏造成的累积布局偏移?
【发布时间】:2020-12-13 01:31:10
【问题描述】:

我的电子商务网站 (Shopify) 有一个公告栏,它会将页面的其余内容向下推送,从而导致 CLS 问题。

我已经在论坛和文章中搜索了一段时间,但所有关于解决 CLS 的建议都非常笼统(“确保不要出现弹出窗口!”),缺乏实际实施指南。

公告栏的高度在所有设备上都是固定的 46 像素,所以理论上这应该很容易通过在主题文件中为其分配空间来解决,但我不知道该怎么做。

【问题讨论】:

  • 除了你已经尝试过的以外,请向我们展示一个 sn-p 中的 HTML/CSS。
  • @MahmoodKiaheyrati HTML/CSS 是什么?公告栏?
  • 任何您认为可能有助于找出问题并理解页面上不同元素之间关系的内容。可以给我你的网址吗?
  • 公告栏相关的CSS:.announcement-bar { display: block;文本对齐:居中;位置:相对;文字装饰:无; }

标签: css cls


【解决方案1】:

这应该可以解决问题!将它添加到你的 CSS 样式的末尾。

.announcement-bar{
  position: absolute !important;
  height: 25px;
  width: 100%;
  font-size: small;
}
.announcement-bar__message{
 padding:0 !important;
  
}

【讨论】:

  • 嗨,马哈茂德,感谢您的回复。这是事情变得有点棘手的地方,因为我的网站是用 Shopify 构建的,它是一个 CMS,所以在主题文件中我实际上看不到那个 HTML。
  • 嘿,很遗憾,这不起作用。当我使用这些设置时,它只会使公告栏与现有页面重叠,而不是为公告栏留出固定空间。见这里:imgur.com/a/SBXiQ24
  • 我确实将字体粗细和条形高度增加到 46 像素而不是 25 像素,因为这些是我想要的这些类别的值,我不想更改这些值。我想找到一种方法来解决这个 CLS 问题而不使字体变小
猜你喜欢
  • 2021-09-18
  • 2020-10-31
  • 2021-05-28
  • 1970-01-01
  • 1970-01-01
  • 2020-12-31
  • 1970-01-01
  • 2022-07-23
  • 2021-03-10
相关资源
最近更新 更多