2012-04-13 10 views
2

hier ist etwas, was ich nie gedacht, dass Typ I: Chrom, das Layout bricht, aber IE (oder ein anderer Browser für diese Angelegenheit) tut ...Warum zieht Chrom die Bodenelemente nach einem relativ positionierten Element hoch?

gibt es einen funktionsfähigen Schieber mit position: relativer; mit Elementen innen mit Position: absolut;

die Javascript-Schleifen durch die Elemente einer sich drehenden Bilder erstellen

siehe: http://guardianweb.edulence.com/model10/

i eine margin-top von 304px zu den beiden Elementen unter dem vorgestellten Schieber hinzugefügt haben, aber die Lücke ist riesig in jedem Browser neben Google Chrome

+0

Kann mit dieser http://groups.google.com/group/ in Verbindung stehen. jquery-de/browse_thread/thread/0a66b577b7036a14? pli = 1 –

Antwort

3

Was passiert ist, dass andere Browser eine Höhe von 305px und die Breite von 940px falsch auf Ihre #featured Division anwenden. Ich habe keine Ahnung, warum sie das tun würden. Chrome ist korrekt Rendering dieses Element mit einer Höhe von 0, weil es keinen Inhalt innerhalb des Elements (absolut positionierte Elemente nehmen keinen Platz im Fluss des Dokuments).

In Chrome:

Chrome element

In Firefox:

Firefox element

nehme ich eine Möglichkeit, Sie könnten arbeiten, um dieses ist manuell die Breite angeben und Höhe auf Ihrem #featured elem so dass alle Browser, einschließlich Chrome, dasselbe tun.

+0

ahhhh natürlich Chrome ist der einzige Browser, der das richtig macht. Danke für die Hilfe :) –

+0

Die Browser verwenden die Inline-Höhe und -Breite nicht, das Plugin ist. Es schien, als ob eine Art von Chrom wie ein lustiger "innerHeight" war, aber die Seite änderte sich, bevor ich sie eingrenzen konnte.Das Plugin sollte die Größe des Div ändern, wenn es keine Größe hat. –

0

Dies ist nicht die Schuld von Chrome. Wenn Sie das Element #featured untersuchen, werden Sie feststellen, dass dieses Element in Firefox über die CSS-Inline-Stile Höhe und Breite verfügt, nicht jedoch über Chrome.

Firefox: <div id="featured" style="width: 940px; height: 305px;">

Chrome: <div id="featured">

Die Höhe dieser DIV Null in Chrom.

Die style Attribut in die DIV über JavaScript hinzugefügt wird, so dass Sie herausfinden müssen, werden, warum es für Firefox hinzugefügt wird, aber nicht für Chrome ...

1

Ich glaube, die Frage ist hier:

// 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() scheint falsch in Chrom aber wahr in anderen Browsern. Dies bewirkt, dass das Plugin eine bestimmte Höhe und Breite für das div setzt, wobei in chrome keine Höhe festgelegt ist, dh es ist immer noch 0.

Verwandte Themen