0

JSフィドルリンクhttp://jsfiddle.net/Xfvpu/1/

さて、私はxhtml doctypeのドキュメントを持っていて、適切なbr /タグを使用していますが、何らかの理由で、Firefoxでは2つの画像間のギャップが他のすべてのブラウザとは異なってレンダリングされます。

このページはhttp://www.safaviehhome.com/Rugs/Area-Rugs.htmlにあります。

残念ながら、CSSはすべて混同されているため、明示的に投稿することはできませんが、2つの画像はDIVラッパー内にあり、画像自体は個別のdivにはありません。どちらにも画像マップがあり、2つの画像の幅のサイズは約20pxしか異なりません。

2つの画像の間に2つのbr/タグがあり、Firebugをいじってみましたが、理解できませんでした..そして、これを理解するまでは幸せではありません..それは私を怒らせます！:)

他のブラウザとFirefoxの違いは約10pxの違いです..Firefoxは余分な間隔を追加します..私は特に助けを求めていません、私が気付いていないレンダリングの問題があるかどうかを確認したかったので、置くことができますこの問題は残ります。

他のブラウザとFirefoxを比較して、私が何を意味するのかを確認してください。私自身の知識のためにこれを理解するために必要な助けを本当にいただければ幸いです。

4

2 に答える 2

3

<br/>垂直方向の間隔を使用することに依存することはできません。次のようなスタイルを使用する必要があります。

<div style="margin-top:5px">image goes here</div>

あるいは：

<img style="margin-top:5px" src="yourimg.jpg" />

私の経験では、このアプローチを使用する場合、ブラウザーは十分に一貫性があります。

追加するために編集：

しかし(そして、私はこれを十分に強調することはできません): ブラウザーが完全に一貫していることはありません。100% の一貫性が可能であると想定する設計は失敗します。(これが厳しいと思われる場合は、スマートフォンのブラウザーだけを使用して 1 日を過ごしてみてください。うん。)

于 2012-06-21T16:49:56.543 に答える
0

Firefox がこのように動作する正確な理由はわかりませんが、アドバイスを提供できます。私の経験から、レイアウトに br タグを使用することは、最も賢明なアイデアではありません。作成される正確な間隔を簡単に制御できなくなるためです。この場合のように、Firefox は 2 つの br タグを 2 つの行として解釈するように見えますが、少なくとも Opera は最初のタグをマップの後の改行として受け取り、2 つ目のタグはこの空白を作成します。

あなたは回避策を求めていませんでしたが、私は抵抗できません: br-less alternative を見てください。

于 2012-06-21T16:57:10.453 に答える