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

おそらくdisplay inline-blockを使用するとうまくいく

于 2012-12-31T00:27:35.033 に答える