html - CSS :after background in Safari for Windows

Question

我正在尝试将一些箭头放在表格标题上。我使用 :after CSS 伪元素做到了这一点。

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

为什么会这样？有办法解决这个问题吗？

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