1

H！

WebkitブラウザとFirefoxのいくつかの要素の配置に問題があります。

Safari / Chromeでは、次のようになりたいようです。

ここに画像の説明を入力してください

しかし、Firefoxでは次のようになります。

ここに画像の説明を入力してください

コード

HTML 

<ul>
  <li>
    <div class="img">
      <a href="#">
        <img src="#" />
        <p><span class="circle"><img src="white-circle.png" alt="" /></span></p>
      </a>
    </div>
  </li>
</ul>

CSS

li {
  position: relative;
}

p {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: black;
}

p img {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35%;
  margin-left: -35%;
}

そこで何が起こっているのか分かりますか？Firefoxの解釈はposition: absolute異なりますか？

4

2 に答える 2

1

絶対測位を使用する場合、Firefoxは常にChromeとSafariとは異なる動きをするようです。私の意見は

    p img:{position: relative;}

（相対位置は、絶対を使用する場合にのみ問題ありません）。

幸運を

于 2013-01-12T17:25:31.480 に答える
0

どうやら、他のいくつかの台無しにされたCSSルールがそこで働いていました。一時的な修正として、このガイドを使用してFirefoxで機能するソリューションを見つけました。
おそらくそれはすべての画像に影響を与えるいくつかのルールですが、私は今それを見つけることができませんでした。

于 2013-01-12T17:21:26.827 に答える