web-dev-qa-db-ja.com

Firefoxでの絶対配置の問題とchrome

なぜFFとChrome=でページのレンダリングが異なるのかわからない。ここにスクリーンショットがあります。

firefox： firefoxの例http://grab.by/65Bn

そして、これはクロームのものです

クロム： クロムの例http://grab.by/65BB

fieldsetには相対位置があり、画像には絶対位置があります。

基本的な構造は次のとおりです。

<fieldset class="passenger-info">
  <legend>Passenger 1</legend>
  <div class="remove-me">
    <img src="/images/delete-icon-sm.png" />
  </div>
</fieldset>

基本的に、画像は凡例の直後に宣言されます。

これがフィールドセットのCSSです：

.passenger-info {
  background:none repeat scroll 0 0 #F2F2F2;
  border:1px solid #9D240F;
  display:inline;
  float:left;
  margin-bottom:10px;
  margin-right:10px;
  padding:3px 10px;
  position:relative;
  width:350px;
}

そして、remove-meイメージの場合：

.remove-me {
  border:1px solid red;
  position:absolute;
  right:0;
  top:0;
}

それは完全に奇妙です。フィールドセットのパディングを外してみましたが、画像が少し上に移動しましたが、まだ角にありません。

この投稿は、FFが実際にフィールドセットのレンダリングに問題があることを示しています。

http://www.codingforums.com/showthread.php?t=132624

ブラウザー固有のハックを使用せずに修正を行うより良い方法はありますか？

htmlcssfirefoxgoogle-chromecss-position
22
corroded

これが4歳であるとは信じられませんが、まだ答えられていません。私はどこでもこの答えを探しました。これは、フィールドセット内の画像で絶対位置を使用するために行ったものです。ここから、Firefoxで機能するように右と上の位置を変更します。 （IE、Chrome、Safari、Operaの元のクラスはそのままにしておきます）

@-moz-document url-prefix() { 
  .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

これはFirefoxのハックで、Firefoxのすべてのバージョンで機能します。 Firefoxバージョン33.0.2を使用しているため、これが古いバージョンで動作することを確認できません。私のサイトでも同じ問題が発生しました。 IE、Opera、Safari、Chromeで同じように見えました。 Firefoxでのみ、位置が異なることに気付きました。これでうまくいきます！

29
Marcus

Firefoxには、要素をテキストスペースの右上に配置する非表示のパディングまたはマージンがあるようです。 Chromeは、要素をテキストフローの外側のfieldset要素の右上に配置しています。

できることの1つは、divラッパーを追加し、ラッパーの右上に要素を絶対配置して、フィールドセットの隅に配置することです。

7
js1568

.remove-me要素にマージンがある可能性があります。アイテムに絶対位置を追加する前に、必ずそれを削除してください。

正確な結果を得るには、CSSで常に「リセット」する必要があります。つまり、すべての要素からマージン/パディングを削除します。

簡単なリセット：

* { margin: 0; padding: 0px; }

それをCSSの一番上に置きます。

2
Jake Bellacera

私は@media screenと（-webkit-min-device-pixel-ratio：0）{}を使用して、その方法で絶対を修正しました。あまり乾燥していませんが、機能します。

2
Nicktea

これは、ボタンを含むdiv（乗客情報）の高さを指定しなかったためだと思います。 Chromeこれを指定しないと動作し始めます。

1
Arno Inen

マージンを使用する代わりに、左、上、右、下を使用します。例：

position: absolute;top: 10px;left: 20px;

1
Basant

本当の解決策はFirefoxであり、つまり、上、左、右、下のデフォルトを設定しないでください。

これらを適切に設定することで問題を解決することができました。

1
Austin Peterson