Question

Browser Comparison

您好我正在一个网站上工作，我需要在列表中的圆圈中添加数字。我已经复制了这个我正在测试的代码，因为它几乎就是我之后的类型，并且除了IE11之外，它在每个浏览器中都能正常工作，不幸的是IE11之一浏览器我必须确保该网站可以使用。上图显示左侧为Chrome，右侧为IE11。

我无法弄清楚为什么这不起作用。当我在IE11中查看时，所有数字都消失了。任何人都可以帮助我指出正确的方向。

<!DOCTYPE html>
<html>
<head>
<style>
.au {
  display:inline-block;
  border:1px solid #ccc;
  background:#f2f2f2;
  border-radius:10px;
  box-shadow:2px 2px 2px #888;
  padding:10px; 
  margin:50px;
}
ol {
  list-style:none;
  counter-reset:mycounter;
  padding:0;
}
ol li {
  position:relative; 
  margin-left: 30px;
  padding:5px 0;
}
ol li:before {
  content:counter(mycounter); 
  counter-increment:mycounter;
  position:absolute;
  top:0;
  left:-30px;
  width:25px;height:25px;line-height:25px;
  border-radius:50%;
  color:#fff;
  background:teal;
  text-align:center;
}
</style>
</head>
<body>

<div class="au">
<h2>States in Australia</h2>
    <ol>
      <li>New South Wales</li>
      <li>Victoria</li>
      <li>South Australia</li>
      <li>Western Australia</li>
      <li>Queensland</li>      
      <li>Tasmania</li>      
    </ol>
<h2>Territories in Australia</h2>
    <ol>
      <li>Northern Territory</li>
      <li>Australian Capital Territory</li>
    </ol>
</div>
</body>
</html>

CSS - 在IE11中以圆圈列出数字

0 个答案: