CSS:在Safari for Windows的背景之后

Question

我正试图在表格标题上添加一些箭头。我使用:afterCSS伪元素来完成此操作。

我面临的问题是，这在所有浏览器中都能正常工作，除了Safari for Windows，那里的背景图像不会出现。

为什么会发生这种情况？有办法解决这个问题吗？

HTML

<div class="test">ABC</div>

CSS

.test:after
{
    content:" ";
    background:url(http://www.designwalker.com/img/arrow/arrow06.jpg);
    padding-left:20px;
    background-size:10px 10px;
}

注意：这只是一个例子，而不是它真正的样子。

Answer 1

我认为您需要指定display: inline-block（或block）和height。

.test:after {
  content:" ";
  background:url(http://www.designwalker.com/img/arrow/arrow06.jpg);
  padding-left:20px;
  background-size:10px 10px;
  height: 30px;
  display: inline-block;
}

http://jsbin.com/OrIdozUc/2/edit