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

Question

我正在尝试将 Bootstrap字形图标用作具有圆形背景的按钮。我想只用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;
}

这是工作示例

问候！

Answer 1

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

有一些像Css3pie这样的黑客攻击。

:nth-child更新： IE < 9 也不支持伪类。这里有示例站点，您可以在其中检查主要浏览器如何支持 css http://reference.sitepoint.com/css/selectorref