css - 带圆圈背景的引导字形图标仅由CSS

我正在尝试将Bootstrap glyph icons用作带有圆圈背景的按钮。我只想通过CSS实现。
我发现了两种可能性（如下），但是在IE9兼容模式下不起作用。什么棘手的问题会导致IE问题？

li:nth-child(even) .button-16 {
  background-color: #369;
  border: 2px solid #369;
  border-radius: 16px;
}
li:nth-child(odd) .button-16:after {
  content: " ";
  display: block;
  height: 16px;
  z-index: -1;
  position: relative;
  background-color: #369;
  border-radius: 16px;
  box-shadow: 0px 0px 1px 0px #369;
  width: 16px;
  left: -1px;
  top: -1px;
}

在这里工作example

问候！

最佳答案

IE9兼容模式意味着该站点与较旧的IE版本兼容，但不幸的是不支持border-radius。

有一些技巧，例如Css3pie。

更新：
IE :nth-child。
在这里，您有一个示例网站，可以在其中查看主要浏览器http://reference.sitepoint.com/css/selectorref如何支持CSS。