2

ここに私が入力するとは思っていなかったものがあります：chromeはレイアウトを壊しますが、IE（または他のブラウザ）はそうではありません...

position: relative; の注目のスライダーがあります。内部に要素があり、position: absolute;

JavaScript は要素をループして、回転する画像を作成します。

参照: http://guardianweb.edulence.com/model10/

注目のスライダーの下の 2 つの要素に 304px のマージントップを追加しましたが、Google Chrome 以外のすべてのブラウザーでギャップが大きい

4

3 に答える 3

3

何が起こっているのかというと、他のブラウザが誤って高さ 305 ピクセル、幅 940 ピクセルをあなたの#featured区画に適用しているということです。なぜ彼らがそんなことをするのか私にはわかりません。要素内にコンテンツがないため、 Chrome は高さ 0 の要素を正しくレンダリングしています (絶対配置された要素は、ドキュメントの流れでスペースを占有しません)。

Chrome の場合:

クロム要素

Firefox の場合:

Firefox 要素

これを回避する方法の 1 つは、要素の幅と高さを手動で指定して#featured、Chrome を含むすべてのブラウザーが同じように動作するようにすることだと思います。

于 2012-04-13T19:22:20.920 に答える
1

問題はここにあると思います：

// stretch container
var reshape = opts.containerResize && !$cont.innerHeight();
if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
    var maxw = 0, maxh = 0;
    for(var j=0; j < els.length; j++) {
        var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
        if (!w) w = e.offsetWidth || e.width || $e.attr('width');
        if (!h) h = e.offsetHeight || e.height || $e.attr('height');
        maxw = w > maxw ? w : maxw;
        maxh = h > maxh ? h : maxh;
    }
    if (maxw > 0 && maxh > 0)
        $cont.css({width:maxw+'px',height:maxh+'px'});
}

!$cont.innerHeight()クロムでは偽のようですが、他のブラウザでは真です。これにより、プラグインは div に特定の高さと幅を設定しますが、クロムのように高さが設定されていないため、まだ 0 です。

于 2012-04-13T19:27:07.630 に答える
0

これは Chrome のせいではありません。この要素を調べる#featuredと、Firefox では CSS インライン スタイルを介してこの要素の高さと幅が設定されていますが、Chrome では設定されていないことがわかります。

ファイアフォックス:<div id="featured" style="width: 940px; height: 305px;">

クロム：<div id="featured">

その DIV の高さは、Chrome ではゼロです。

そのstyle属性は JavaScript を介して DIV に追加されるため、Chrome ではなく Firefox に追加される理由を理解する必要があります...

于 2012-04-13T19:22:21.153 に答える