0

我对 HTML 和 CSS 没有太多经验，所以也许我忽略了一些东西。

我ol li在不同的表中有一个列表，每个表都是前一个表的延续。我在 Dreamweaver 中工作，它可以正确显示，但是当我在 IE 或 Firefox 中实时预览它时，它不起作用。关于我做错了什么有什么建议吗？

这是代码：

.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%;
}
<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>

这是它在 IE 中的样子：

在 IE 中列出

4

1 回答 1

0

我在这个线程中为任何有类似问题的人找到了解决方案：https ://stackoverflow.com/a/53087400/13432746

更改style="--start:n"为style="counter-reset: step-counter n"完成工作。

n 是数字

于 2020-04-29T16:09:42.873 回答