如何修复Safari中::marker显示问题（保留.dt类）

原始代码 #

CSS：

.ol-class {
  list-style-type:decimal;
}

.dt {
  display:table;
}

HTML：

<ol class="ol-class">
  <li><div class="dt">Open app.</div></li>
  <li><div class="dt">Tap on your avatar on bottom right corner.</div></li>
  <li><div class="dt">Tap on icon on upper left corner.</div></li>
</ol>

问题说明 #

在Safari浏览器中，当<li>的直接子元素使用display: table样式时，列表的十进制标记（::marker）会出现显示异常，比如标记消失或位置错乱。以下是无需删除.dt类的修复方案：

方案一：使用Flex布局调整

结构 #

通过给<li>添加Flex布局，确保列表标记与内部的table元素正确对齐：

.ol-class {
  list-style-type: decimal;
}

.ol-class li {
  display: flex;
  align-items: flex-start; /* 保持标记与内容顶部对齐 */
}

.dt {
  display: table;
  flex: 1; /* 让table元素占据<li>的剩余空间 */
}

方案二：调整标记位置并添加缩进 #

将列表标记设置为内部显示，再通过缩进让内容与标记区分：

.ol-class {
  list-style-type: decimal;
  list-style-position: inside;
}

.dt {
  display: table;
  margin-left: 1.5em; /* 根据标记实际宽度调整缩进值 */
}

两种方案均能保留.dt类的display: table属性，同时解决Safari中的标记显示问题，可根据页面整体布局需求选择合适的方案。

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