如何在Safari浏览器中隐藏轮播指示器的有序列表序号？

你在切换到Bootstrap 5.3.2后，轮播指示器<ol class="carousel-indicators">出现了默认序号，使用.carousel-reviews li::marker { content: none; }能在Chrome和Firefox中隐藏序号，但在Safari浏览器中无效。这是因为Safari对::marker伪元素的处理逻辑和其他浏览器存在差异，试试以下几种解决方法：

方法1：直接给<ol>设置列表样式为无 #

给包含轮播指示器的<ol>标签添加list-style: none，直接覆盖Safari的默认列表序号样式，还可以顺带清除默认内边距避免布局偏移：

.carousel-indicators {
  list-style: none;
  padding-left: 0;
}

方法2：兼容Safari的marker降级处理 #

同时给<li>设置list-style-type: none和::marker样式，确保在Safari中生效：

.carousel-reviews li {
  list-style-type: none;
}
.carousel-reviews li::marker {
  content: none;
}

方法3：强制隐藏序号的备选方案 #

如果以上方法都不生效，还可以通过text-indent把序号移出可视区域，或者设置字体大小为0来隐藏：

.carousel-reviews li {
  text-indent: -9999px;
  /* 或者用以下代码替代 */
  /* font-size: 0; */
}

另外注意你的HTML代码中，第一个<li>的data-bs-target属性里不小心混入了图片链接代码，记得修正为正常格式：

<ol class="carousel-indicators">
    <li data-bs-target=".carousel-reviews" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target=".carousel-reviews" data-bs-slide-to="1"></li>
</ol>

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