Question

我在firefox 12+中的伪元素上定位有问题（可能更早）。该元素看起来好像相对于页面，但我在锚标记上有position:relative。有什么建议吗？

HTML

<a href="http://localhost:8888/wordpress/test-file/Test-File/" rel="attachment wp-att-150">Test File</a>

CSS

a[rel~="attachment"] {
  display: inline-block;
  position: relative;
  background: #EAE3EA;
  height: 64px;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -khtml-border-radius: 7px;
  border: 3px solid #515151;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 0 5px 0 47px;
  font-weight: 400;
}

a[rel~="attachment"]::before {
  content: '';
  background: url(img/file.png) no-repeat;
  width: 37px;
  height: 48px;
  top: 5px;
  left: 5px;
  position: absolute;
}

Answer 1

您可以使用边距来定位a::before，而不是使用相对定位，请记住您可以使用负边距，这样您就可以充分控制元素的位置。

Answer 2

你覆盖

display: inline-block;

与

display: table-cell

也许使用display inline-block可以解决问题

绝对不能在firefox 12+中使用伪元素

2 个答案: