2

我在 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;
}
4

2 回答 2

3

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

于 2012-12-31T00:38:22.343 回答
1

你覆盖了

display: inline-block;

和

display: table-cell

也许使用显示内联块可以解决问题

于 2012-12-31T00:27:35.033 回答