HTML ol列表start属性与CSS变量在IE/Firefox中失效问题求助

我HTML与CSS经验有限，可能忽略了某些细节。我在不同表格单元格中放置了<ol><li>列表，希望每个列表的计数是上一个的延续。该内容在Dreamweaver中显示正常，但在IE或Firefox实时预览时无法正常工作。请问问题出在哪里？

原CSS代码： #

.recept-bereiding { position: relative; margin-top: 5px; padding-bottom: 5px; }
.recept-bereiding img { float: left; padding-right: 5px; padding-bottom: 5px; clear: left; }
.steps { margin: 0; padding: 0; list-style-type: none; color: #9a084d; font-size: 0.9em; counter-reset: step-counter calc(var(--start) - 1); }
.recept-bereiding td { height: 135px; text-align: left; vertical-align: top; }
.steps ol { list-style-type: decimal; }
.steps li { counter-increment: step-counter 1; counter-reset: none; line-height: normal; }
.steps li::before { content: counter(step-counter); background-color: #7dc623; margin-right: 5px; padding: 4px 8px; font-size: 0.9em; font-weight: bold; color: #ffffff; border-radius: 100%; }

原HTML代码： #

<div class="recept-bereiding">
<h2>Lorem Ipsum</h2>
<table>
<tr>
<td><img src="img/recept-stap1.jpg" alt=""/></td>
<td><ol class="steps">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap2.jpg" alt=""/></td>
<td><ol style="--start:2" start="2" class="steps">
<li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap3.jpg" alt=""/></td>
<td><ol style="--start:3" start="3" class="steps">
<li>Suspendisse dapibus tincidunt purus, ut mattis massa dignissim at. Morbi elementum fermentum venenatis. Proin non lorem aliquet nibh feugiat ultricies. Phasellus condimentum maximus semper. Morbi eu posuere purus, eget hendrerit velit. Curabitur condimentum tortor nunc.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap4.jpg" alt=""/></td>
<td><ol style="--start:4" start="4" class="steps">
<li>Praesent convallis mauris quam. Praesent lobortis ante nec mauris iaculis, lobortis consectetur neque blandit. Vivamus leo metus, vehicula tincidunt enim ac, tempus sodales.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap5.jpg" alt=""/></td>
<td><ol style="--start:5" start="5" class="steps">
<li>Nam non leo mollis, fermentum dui vel, sagittis nulla. In in justo eu odio imperdiet maximus a eu dolor.</li>
</ol></td>
</tr>
</table>
</div>

问题分析 #

1. 计数器作用域错误：你给每个<ol>都添加了.steps类，并且在这个类里重置了step-counter计数器。这意味着每个独立的<ol>都会重新初始化计数器，导致每个列表项都从1开始计数，无法延续。
2. IE兼容性问题：IE完全不支持CSS变量（--start），也不支持calc()与counter-reset结合的用法，所以原代码中依赖--start的计数器逻辑在IE中完全失效。
3. 原生列表样式冲突：你同时开启了原生有序列表的decimal样式和自定义伪元素计数器，会导致列表项显示两个数字（原生+自定义）。

修复方案 #

我们需要把计数器的作用域提升到整个父容器，让所有列表项共享同一个计数器，同时去掉冗余的原生列表样式和不兼容的CSS变量：

修改后的CSS代码：

.recept-bereiding { 
  position: relative; 
  margin-top: 5px; 
  padding-bottom: 5px; 
  counter-reset: step-counter 0; /* 在父容器初始化计数器，所有子项共享 */
}
.recept-bereiding img { 
  float: left; 
  padding-right: 5px; 
  padding-bottom: 5px; 
  clear: left; 
}
.steps { 
  margin: 0; 
  padding: 0; 
  list-style: none; /* 去掉原生列表符号，避免重复显示 */
  color: #9a084d; 
  font-size: 0.9em; 
}
.recept-bereiding td { 
  height: 135px; 
  text-align: left; 
  vertical-align: top; 
}
.steps li { 
  counter-increment: step-counter; /* 每个列表项递增共享的计数器 */
  line-height: normal;
  padding-left: 30px; /* 给自定义数字伪元素留出空间 */
  position: relative;
}
.steps li::before { 
  content: counter(step-counter); 
  background-color: #7dc623; 
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 8px; 
  font-size: 0.9em; 
  font-weight: bold; 
  color: #ffffff; 
  border-radius: 100%; 
}

修改后的HTML代码：

<div class="recept-bereiding">
<h2>Lorem Ipsum</h2>
<table>
<tr>
<td><img src="img/recept-stap1.jpg" alt=""/></td>
<td><ol class="steps">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap2.jpg" alt=""/></td>
<td><ol class="steps">
<li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap3.jpg" alt=""/></td>
<td><ol class="steps">
<li>Suspendisse dapibus tincidunt purus, ut mattis massa dignissim at. Morbi elementum fermentum venenatis. Proin non lorem aliquet nibh feugiat ultricies. Phasellus condimentum maximus semper. Morbi eu posuere purus, eget hendrerit velit. Curabitur condimentum tortor nunc.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap4.jpg" alt=""/></td>
<td><ol class="steps">
<li>Praesent convallis mauris quam. Praesent lobortis ante nec mauris iaculis, lobortis consectetur neque blandit. Vivamus leo metus, vehicula tincidunt enim ac, tempus sodales.</li>
</ol></td>
</tr>
<tr>
<td><img src="img/recept-stap5.jpg" alt=""/></td>
<td><ol class="steps">
<li>Nam non leo mollis, fermentum dui vel, sagittis nulla. In in justo eu odio imperdiet maximus a eu dolor.</li>
</ol></td>
</tr>
</table>
</div>

修复说明 #

• 把计数器step-counter的初始化放到父容器.recept-bereiding中，确保所有<li>共享同一个计数器，实现连续计数。
• 移除了每个<ol>上的--start变量和start属性，因为计数器会自动连续递增，不需要手动指定起始值。
• 去掉了原生列表的decimal样式，避免和自定义伪元素数字重复显示。
• 调整了<li>的内边距和伪元素的定位，让自定义数字显示更规整，同时兼容所有现代浏览器和IE8+。

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