なぜFFとChrome=でページのレンダリングが異なるのかわからない。ここにスクリーンショットがあります。
firefox: firefoxの例http://grab.by/65Bn
そして、これはクロームのものです
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
ブラウザー固有のハックを使用せずに修正を行うより良い方法はありますか?
これが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でのみ、位置が異なることに気付きました。これでうまくいきます!
Firefoxには、要素をテキストスペースの右上に配置する非表示のパディングまたはマージンがあるようです。 Chromeは、要素をテキストフローの外側のfieldset要素の右上に配置しています。
できることの1つは、divラッパーを追加し、ラッパーの右上に要素を絶対配置して、フィールドセットの隅に配置することです。
.remove-me要素にマージンがある可能性があります。アイテムに絶対位置を追加する前に、必ずそれを削除してください。
正確な結果を得るには、CSSで常に「リセット」する必要があります。つまり、すべての要素からマージン/パディングを削除します。
簡単なリセット:
* { margin: 0; padding: 0px; }
それをCSSの一番上に置きます。
私は@media screenと(-webkit-min-device-pixel-ratio:0){}を使用して、その方法で絶対を修正しました。あまり乾燥していませんが、機能します。
これは、ボタンを含むdiv(乗客情報)の高さを指定しなかったためだと思います。 Chromeこれを指定しないと動作し始めます。
マージンを使用する代わりに、左、上、右、下を使用します。例:
position: absolute;
top: 10px;
left: 20px;
本当の解決策はFirefoxであり、つまり、上、左、右、下のデフォルトを設定しないでください。
これらを適切に設定することで問題を解決することができました。