3

Webkit ブラウザーでのみ発生するかなり複雑なレイアウトの問題があります。このスクリーンショットを見てください：

ここに画像の説明を入力

まず、ここで何をしようとしているのかを説明させてください。このレイアウトの目的は、画像のグリッドを表示することです。各グリッド セルは正方形です。レイアウトはレスポンシブであるため、別のビューポート幅では、1 行あたり 2 つではなく 3 つの画像が表示される場合があります。

技術的には、マークアップは図のリストであり、各図内にはリンクがあり、リンク内には実際の画像があります。疑似マークアップ:

<ul>
<li><figure><a href=""><img src="" width="0" height="0" /></a></figure></li>
<li><figure><a href=""><img src="" width="0" height="0" /></a></figure></li>
</ul>

ご覧のとおり、内側の画像には幅がありません。画像コンテナとして使用する li 要素に幅が設定されているため、これは意図的なものです。スクリーンショットに示されているビューポートの例では、li 要素の幅が 50% に設定されています。

次に、実行時に img 要素をすべて非表示にし、その src パスを「a」要素の背景画像として設定します。これの目的は、画像のサイズや縦横比に関係なく、画像を正しく中央に配置することです。

主な注意事項:すべての要素で box-sizing:border-box を使用しています。

ここで、このランタイム ルーチン中に、「li」要素の高さを動的に計算して、正方形にするようにします。サンプルのスクリーンショットのビューポート幅が 400 ピクセルであると仮定してみましょう。すべての "li" 要素は幅が 50% に設定されているため、幅は 200 ピクセルにする必要があります。これを知って、単純にこの「li」要素の高さを 200 ピクセルに設定し、正方形のコンテナーにします。

// applied to all "li"s in the list
$(this).height($(this).width());

これは、Webkit ブラウザー (Chrome、Safari) を除いて、私がテストしたすべてのブラウザーで完全に機能します。"a" (または li) 要素の幅を設定する前に、幅と CSS 幅の両方を出力すると、非 Webkit ブラウザーはすべての "a" 要素に対してまったく同じ幅を報告します。Webkit ブラウザーでコンソールを見ると、幅にばらつきがあります。一方の「a」要素は 200px で、もう一方は 191px です。実際の値と発生するかどうかは、ブラウザのビューポート幅に依存するようです。

いずれにせよ、結果はスクリーンショットに見られる醜いギャップです. 何が起こったかというと、Webkit がこれらの「a」コンテナーの異なる幅を予期せず報告したため (それらはすべて 50% に設定されています)、高さもさまざまになり、ギャップが発生します。

したがって、大きな疑問は次のとおりです。他のブラウザーでは報告されないのに、すべて同じ親の 50% に設定されている "a" 要素の幅が Webkit によって正しく報告されないのはなぜですか?

これまでの諸説

これにより、これまでに調査されたいくつかのこと：

追加の「スペース」を引き起こすことが知られているli要素でインラインブロックを使用しています。マークアップから空白を削除することでこれを解決しました。いずれにせよ、インライン ブロックは問題ではありません。「li」要素をフロートに変更しても、Webkit ブラウザーは表示すべきではない場合でも異なる幅を表示するからです。

別の理論は、読み込みの順序に関係しています。一部の主張は、私の画像バックグラウンド ランタイム ルーチンを window.load イベントに遅らせることが役立つかもしれません。残念ながら、結果はまったく同じです。

jQuery の .width() と .css("width") の違いも認識しています (1.8.2 を使用しています)。私は両方をコンソールに出力し、Webkit は両方の値を間違って取得するため、違いはありません。

要約

長い説明で申し訳ありませんが、要約します。リスト要素に 50% (ビューポートの幅によっては 33.3333%) の幅を設定し、実行時に実際のピクセル幅を取得します。すべてのリスト要素の幅のパーセンテージは同じですが、なんらかの不思議な理由で、Webkit ブラウザーは異なる幅を報告します。

最後に、問題のライブ リンクを次に示します。

[問題が解決し、ライブコードが変更されたため、削除されました]

この問題を再現するには、Webkit ブラウザーを使用して、ウィンドウのサイズをサンプルのスクリーンショットに合わせて大まかに変更する必要があります。任意のビューポート幅で発生するようです。

4

3 に答える 3

6

ビューポートのピクセル幅が 2 または 3 で割り切れるかどうかに関係しているように見えます。 width:50% および $(document).width()/2=0 の場合は、問題はありませんが、 $(document).width()/2=1 の場合、ギャップが発生します。

したがって、それぞれの高さを計算する代わりに、一度計算して毎回使用することができます。つまり、imageLayout() を次のように変更します。

var aHeight = $('.photos li figure > a')[0].width();
$('.photos li figure > a').each(function(index) {
    console.log('w: ' + $(this).width() + " css w: " + $(this).css("width"));
    console.log('pw: ' + $(this).parent().parent().width() + " css pw: " + $(this).parent().parent().css("width"));
    $(this).height(aHeight);


    if ($(this).attr('data-loaded') != "1") {
        var imgcaption = $(this).parent().find('figcaption a');
        imgcaption.html('<em class="icon-bolt"></em> loading...');
    }

});
于 2013-01-28T22:23:12.180 に答える
1

私は以前にこの問題を抱えていましたが、ブラウザの計算に間違いがあります。

例: http://jsfiddle.net/gSWkd/2/

(Firefox: 正常 / Chrome: 最初の 2 つのレコード 112、その他のレコード 111)

最初の画像から幅/高さを取得して、他の画像に適用することはできますか?

このようなもの: http://jsfiddle.net/gSWkd/4/

HTML:

<div class="why">
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
</div>

CSS

.why {
    width: 223px;
    height: 223px;
}
.heresWhy {
    width: 50%;
    height: 50%;
    float: left;
}
.heresWhy.red {
    background: red;
}
.heresWhy.blue {
    background: blue;
}

JS

// Apply 50% W/H to the first image
$('.why div:first-child').width('50%');
$('.why div:first-child').height('50%');

// Get W/H from the first image
var rightSize = $('.why div:first-child').width() - 1;

// Apply W/H to other images
$('.why div').each(function(){
    $(this).width(rightSize);
    $(this).height(rightSize);
});

// Check W/H
$('.why div').each(function(){
  $(this).html($(this).width()); // Show div width
  $(this).html($(this).height()); // Show div width3
})
于 2013-01-28T22:54:21.300 に答える
1

Webkit ブラウザで、li または ul 要素にデフォルトのマージンがあるかどうかを確認しましたか? マージンとパディングのために、スタイルシートの上部にあるすべての ul または li を 0px に設定してみてください。

li { margin:0px; padding:0px;} ul{ margin:0px; padding:0px}
于 2013-01-28T22:23:17.777 に答える