9

なぜこれが起こっているのか、私は本当に床に落ちています。http://syndex.meの投稿には 2px の余白があります。ページが最初にロードされるとき、これが守られます。投稿の 2 番目のバッチが読み込まれると (14 件の投稿が開始されます)、奇妙な理由で、右側の投稿が実際には本来よりも 2 ピクセル短いことがわかります。

さらに奇妙なことに、投稿を調べると、実際には で設定されていることがわかります。margin:2px さらに奇妙なことに、これは左右の余白でのみ発生し、上下では発生しません (?!)

かなり長い間フロント エンドを担当してきたので、これは奇妙なケースだと確信しています。

Firefox、Safari、および Chrome でこのレンダリングの問題が発生しています。

インスペクタを使用して投稿をロールオーバーすると、各投稿に実際に 2px の余白があることがわかります。2 番目の投稿 (右側) の余白は、横にある投稿の余白がゼロのように始まりますが、それも確かに持っています。

投稿が隣接する左右の余白を無視しているように見えますか?

1 つのこと、投稿は を使用してdisplay:inline-blockいます。私が理解していないのは、なぜ動作が遅延ロード後にのみ開始されるのですか? インライン要素には 2 ～ 4 ピクセルの自然なスペースがあることはわかっていますが、これは 2 ピクセルを無視していて、奇妙に思えます。

これをどこから調べればよいかわかりません。助けていただければ幸いです。

4

4 に答える 4

10

ページが最初に読み込まれるとき、HTML 内の各 の間に空白があります<div class="post">。空白の各チャンクは、1 つの空白文字 (通常は 4px 幅) としてレンダリングされます。<div class="post_margin_adjustment">でこれを打ち消すmargin-right: -4pxため、最初の投稿間のギャップは 8px です。

  4px (余白-左ポストから右)  
+ 4px (空白文字)  
- 4px (負のマージン - 左から右へ post_margin_adjustment)  
+ 4px (右ポストからのマージン-左)  
= 8px

Infinite Scroll プラグインが次のページを読み込むと、新しい要素を取得し、空白なしdiv.postでページに挿入します。したがって、新しい投稿間のギャップは 4px です。

  4px (余白-左ポストから右)  
- 4px (負のマージン - 左から右へ post_margin_adjustment)  
+ 4px (右ポストからのマージン-左)  
= 4px

これが、最初の投稿の間隔よりも新しい投稿の間隔が狭い理由です。

これを修正するには、次のようにします。

  1. 最初の投稿間の空白を削除します。

    $('div.post').detach().appendTo('#posts');

    Infinite Scroll プラグインが行っていることをエミュレートします。

  2. から削除margin-right: -4px;し.post_margin_adjustmentます。

最初の投稿と新しい投稿の間のギャップは、両方とも 8px 幅になるはずです。

于 2012-05-31T16:01:10.233 に答える
4

まず、この SO アンサーは、このページでZuulが提供する SO アンサーを補足するものです。彼の回答を編集できなかったか、ピアレビュープロセスが何らかの理由で機能しませんでした。

SO の質問には、信頼できる情報源および/または公式の情報源が提供されています。

参照: 「インスペクターによる計算されたスタイルは、あることを言っているのに、視覚的には別のことをしているということはあり得ませんか?」

この場合、 FirefoxにはCSS 用の 3D ビューアーが組み込まれています。画像は正しく読み込まれているがmargin-right、問題が発生しているという情報が表示されます。ゴールド ヘルメットの写真用にキャプチャした画像を使用して、これを説明しましょう。

この最初の画像は、独自のコンテナにロードされた画像を点線で示しています。ただし、画像自体が右側の点線の外側に広がっていることに注意してください。 marginError.jpg


この 2 番目の画像は、 Firefox 3D Viewer を使用したクローズアップです。ここでは、元のコンテナーがページに正しく配置されていることがわかります。青色の一番下のレベルが表示されています。これは、onloadプロセスが右側の画像までの正しい CSS 距離を尊重したことを示しています。右上のテキストがぼやけていますが、使用中のチェックマークがあります。 margin-right-4pxcssRespectedOnload.jpg


この最後の写真には、削除済みのチェックマークが付いていmargin-rightます。写真が正しく表示されるようになったことに注意してください。 removeMarginOffset.jpg


3D Viewer for CSS を使用する場合、上記は Firefox を使用して複製できます。

NEW:各画像を右クリックview imageして、拡大版を表示することを選択できます。

于 2012-06-04T20:25:57.987 に答える
3

問題が正しければ、Firebug を使用して FF12.0 でページを分析すると、次のことがわかります。

.post_margin_adjustment {
    margin-right: -4px;
}

そして、それは左側の投稿を右側に引っ張っているため、レイアウトがあなたに対して無礼になります:

.index .post {                                         /* syndex.me (line 469) */
  margin: 4px;
}

負のマージンを削除すると、問題が解決するようです。

ノート：

あなたは話しているのですがmargin:2px、現在のcssで私が見ているのはmargin:4px;ですので、投稿間の合計8pxは、マイナスの問題を修正した場合marginです。

「web developer 1.1.9」の「ルーラー」を使用した8pxところ、ネガmarginが無効になっているときに表示されます!

マージン宣言を台無しにしている最後のことは次のとおりです。

.index .post {                                          /* syndex.css (line 1) */
  line-height: 0;
}

この宣言により、画像が引き上げられ、上部/下部の投稿間のスペースが減少します。

これを無効にすると、上下の間隔が固定され、margin:4px.

于 2012-05-30T23:21:08.143 に答える
1

AJAX で取得したコンテンツに、スタイルシートが依存していると思われる空白がありません。証明: いくつかの動的投稿をプリロードし、ページを検査し、body 要素を HTML として編集します。静的な投稿には十分な空白があり(おそらく過度に)、動的な投稿はくっついていることがわかります。

解決策 1: 動的投稿を追加するスクリプトに空白を追加します。

解決策 2: CSS の空白に依存するのを避け、インライン ブロック要素から空白を削除する代替手段を使用します。

IMO #2 の一般的な方向が望ましいです。

于 2012-06-04T01:12:16.680 に答える