IE11中list-style-type:lower-alpha列表丢失缩进问题咨询

嘿，这个IE11的兼容性坑我太熟悉了！老浏览器对列表的默认样式处理确实和Chrome、Edge、Firefox这些现代浏览器不一样，才会出现你说的lower-alpha字母列表丢失缩进的情况。

问题根源 #

IE11没有像现代浏览器那样给有序列表（ol）设置足够的默认padding-left来容纳列表项的标记（也就是你设置的lower-alpha字母），导致标记和列表内容挤在一起，看起来像是丢失了缩进。

修复方案 #

你只需要在现有CSS里给列表元素添加明确的内边距设置就行，有两种方式可选：

方式1：全局修复（适用于所有浏览器）

直接给ol添加padding-left，数值可以根据你的布局调整，比如：

ol {
  padding-left: 2em; /* 这个数值能确保字母标记有足够的空间，不会和内容重叠 */
}

方式2：仅针对IE11修复（避免影响现代浏览器）

如果你不想改动现代浏览器的现有样式，可以用IE11专属的媒体查询来单独设置：

/* 仅IE11生效的样式 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  ol {
    padding-left: 2em;
  }
}

把上面的代码加到你现有的CSS末尾就行，比如放在.bigger样式后面。

补充说明 #

如果你的列表是无序列表（ul），也可以用同样的方法修复，只要把选择器换成ul就好。另外，要注意不要把padding-left设得太小，不然字母标记还是会和列表内容重叠哦～

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