jQuery-Rückgabe verschiedenen Höhen für den gleichen Objekten in WebKit (chrome und Firefox

Im perplex.

jQuery.Höhe() wieder da ist, mit unterschiedlichen Werten in Firefox und Chrome. Die Messung der Pixel auf dem Bildschirm zeigt an, dass die beiden, Chrome erscheint reporting den richtigen Wert, während firefox ausschalten, indem Sie 2 oder 3 Pixel jedes mal. Hat sonst noch jemand auf dieses Problem?

Ich habe versucht, greifen Sie die Höhe mithilfe der verschiedenen jQuery-Höhe-Funktionen (innerHeight, outerHeight, Höhe) ohne Erfolg. Ich habe gestrippt, alle css-styling, das kann unter Umständen schon stören der Wert der Höhe (alle Polsterung, Ränder, Rand, etc) aber ich bekomme immer noch inkonsistente Ergebnisse.

Falls es hilft, ich bin den Umgang mit Tabellen-Zellen. Der code erstellt eine zweite Tabelle neben die erste, und dann entspricht die Höhe jeder Zeile, um eine Art "sticky" linken Spalte auf die Tabelle. Die Zellen haben unterschiedliche Inhalte, aber die passenden 0-Werte für border, padding und margin auf allen Seiten.

BEARBEITEN
6 Stunden später, dieses problem weiterhin zu stumpf mich.

Wenn ich nix-die Grenzen und Schalter innerHeight (), um die Höhe der Messung, beide Browser machen es perfekt. Aber ich brauche, um eine untere Grenze gibt es...

Im moment habe ich webkit-rendering der Tabelle mit den Rändern perfekt, und firefox ist von 1px auf jeder Zelle. Ich wechselte mit jQuery innerHeight () - Funktion zu greifen die Höhen der Zellen, auf die "master" - Tabelle, aber irgendwie firefox) kommt immer ein pixel kurz auf die Messung.

Hier ist der entsprechende code eingebunden. Beachten Sie, dass der HTML-Code wird kopiert von firebug NACH erzeugt werden, die von javascript, so dass die Höhe Erklärungen wird es gemacht. 'master', Tabelle HTML:

<table cellpadding="0" border="0" class="items-table">
<tbody>
    <tr class="selected">
        <td itemid="70609" class="id" style="display: none;">
            70609
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">R1000</span> <span class="description">Armoire</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70609-itemtypeid" id="70609-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="selected">
        <td itemid="70634" class="id" style="display: none;">
            70634
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">C1124</span> <span class="description">Nightstand</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70634-itemtypeid" id="70634-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="selected">
        <td itemid="70642" class="id" style="display: none;">
            70642
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">999</span> <span class="description">Nice Table New Name</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70642-itemtypeid" id="70642-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="selected">
        <td itemid="70643" class="id" style="display: none;">
            70643
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">OC603</span> <span class="description">Coffee Table</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70643-itemtypeid" id="70643-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="">
        <td itemid="70644" class="id" style="display: none;">
            70644
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">OC606</span> <span class="description">Coffee Table</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70644-itemtypeid" id="70644-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
</tbody>

sekundären Tabelle HTML:

<table cellpadding="0" border="0" class="items-table">
    <tbody>
        <tr>
            <td itemid="70609" class="id" style="height: 45px;"></td>
            <td data-contactid="34759" class="bid pending" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                    <div>
                        Sent 2 days ago
                    </div>
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70634" class="id" style="height: 53px;"></td>
            <td data-contactid="34759" class="bid" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
            <td data-contactid="34746" class="bid bid-data assigned" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                    <div class="cost">
                        $90.00
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70642" class="id" style="height: 53px;"></td>
            <td data-contactid="34759" class="bid pending" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                    <div>
                        Sent 2 days ago
                    </div>
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70643" class="id" style="height: 45px;"></td>
            <td data-contactid="34759" class="bid pending" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                    <div>
                        Sent 2 days ago
                    </div>
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70644" class="id" style="height: 45px;"></td>
            <td data-contactid="34759" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS:

.items-table {
    font-size: 12px;
    color: #252629;
    position: relative;
}
.items-table td {
    height: 46px;
    padding: 4px;
    border-bottom: 1px solid #E0E3E3;
    vertical-align: top;
}
.items-table .item-thumb { margin-right: 0px; }

.items-table tr { cursor: pointer; }

.items-table td.id { display:none; }
.items-table td.checkbox { width: 16px; padding: 0 6px 0 9px; vertical-align: middle; }
.items-table td.thumb { width: 48px; vertical-align: middle; }

.items-table td.details { vertical-align: middle; }
.items-table td.details .code { font-weight: bold; }
.items-table td.details .itemtype { color: #606060; }

.items-table tr.selected td {
    background: #E3E3E3;
}
.items-table tr:hover td { background: #ccdbe5; }
.items-table tr.active td { background: #1f6497 url('/images/selected-item.png') repeat-x  top left; color: white; font-weight: bold; }
.items-table tr.active .itemtype { color: #C1C5E1; }

.items-table .cost { padding: 2px 0 0 0; }
.items-table .tags { padding: 2px 0 0 0; }

jQuery-business:

$('#items .items-table tr').each(function() {
                        var ti = $(this).find('.id').text();
                        $('#bids .items-table').append("<tr><td class='id' itemid='"+ti+"'></td>"+newCells+"</tr>")
                        var th = $(this).find('td.thumb').innerHeight();
                        $('#bids .items-table').find('tr:last td').height(th);
                    });

Und das ist, was es sieht aus wie in Chrome:
alt-text http://dl.dropbox.com/u/5536259/chromeSpacing.png

Firefox:
alt-text http://dl.dropbox.com/u/5536259/firefoxSpacing.png

Haben Sie Attribute für cellpadding und border-collapse? Auch wenn Sie buchen können, die minimale html-und jQuery-code, um das problem zu reproduzieren, das hilft immer... =)
ja. in der Tat jede Tabelle hat den gleichen Satz von css-Stile angewendet, einschließlich border-spacing:0, border-collapse:0. die Tabellen haben kein cellpadding oder cellspacing Attribute im html.
Es ist erwähnenswert (obwohl ich mir nicht vorstellen das dein problem), dass border-collapse: 0 ist ungültig. Die verfügbaren Optionen für border-collapse sind inherit, collapse und separate. (Referenz: w3.org/TR/CSS2/tables.html#borders)
Hoppla! Sie haben vollkommen Recht, obwohl, dass war nur ein Tippfehler in meinem post. in meiner css border-collapse ist in der Tat auf 'Zusammenbruch'. gut erkannt, obwohl!
Sind Sie mit einem CSS-reset? könnte etwas buggy mit, wie der browser berechnet die Höhe....

InformationsquelleAutor Jordan Sitkin | 2010-07-29

4

Haben Sie versucht, nicht das styling der TD Elemente, sondern die DIV Elemente, wickeln Sie die Zelle? Dann, berechnen und stellen Sie die DIV-Höhen, denn das ist zuverlässiger? Lassen Sie den Tisch, setzen Sie die Zeilenhöhe automatisch basierend auf dem Inhalt.
Dies, weil Sie bereits bewiesen, dass die verschiedenen Browser berechnen TD Höhen anders (mit Rand...)

InformationsquelleAutor Michael Butler
13

Firefox und im Allgemeinen, Gecko-basierte Browser unterscheiden sich von anderen dadurch, dass Sie versuchen zu tun,subpixel-layout und rendering.

Dies kann machen das Leben schwer, vor allem, wenn Sie arbeiten mit Tabellenzellen, die sind so bemessen, basierend auf deren Inhalt.

IE, Webkit und Gecko berichten können, verschiedene Dimensionen - die letztere reporting einige exotische Bruch-Größen sowie.

Wie für die Fehler: nach dem Kampf mit etwas ähnliches - Messung der Dimensionen dynamisch Größe Tabelle-Zellen - für eine Weile, ich hatte endete spezielle Gehäuse für Bruchzahlen.

Als es Einflüsse Positionen als auch die Abmessungen, die einige Menschen endete mit clientWidth anstelle von jQuery 'innerWidth()', während einige nur verwenden Sie parseInt() auf die zurückgegebenen Ergebnisse.
(Suche nach fract in den Quellen.)

Wenn das nicht zufriedenstellend ist, können Sie versuchen, die folgenden:
- Rendern der primären Tabelle mit "Sichtbarkeit:versteckt" standardmäßig so, dass es ausgelegt ist, aber nicht angezeigt
- Messen Sie die Höhe der Zelle von jQuery
- Runde die Höhen auf den nächsten integer-Wert in der primäre Tabelle und gelten als inline-style (aufrunden kann eine gute Idee sein, um sicherzustellen, dass die Zellen nicht geschnitten Inhalt von 1px)
- Rendern der sekundären Tabelle basierend auf diesen integer-Werte und Wiederherstellung der Sichtbarkeit der primären Tabelle
Könnte es immer noch vorkommen, dass die Grenzen hinweg falsch ausgerichtet sind - dies kann der Fall sein, wenn die position des primären und sekundären Tabellen sind nicht das gleiche (z.B.: primäre oben: 123.75 px -, Sekundär-top: 123px.) In diesem Fall platzieren Sie die Tabellen in einem gemeinsamen container oder nur umlöten auf ganzzahligen Koordinaten kann helfen.

Glück...

Edit: soweit ich mich erinnere, weil einige IE und border-collapse Anomalien, Griff ich zu der (veraltet) cellspacing Eigenschaft - das sollte sich auf das table-element in HTML, nicht CSS - und angegebenen separate Grenzen mit einer Abmessung von 0 im CSS. Ich legte die ganze Tabelle in ein div mit einem background-Farbe.

Das ganze hatte den Effekt, als wenn die Tabelle Grenzen wurden 1px, brach mit der Farbe des hintergrund-div....

vielen Dank für Ihre durchdachte Antwort. jedoch, ging ich durch Ihre Anregungen und festgestellt, dass das Problem nicht ein subpixel-layout/rendering. alle Browser scheinen reporting schöne Runde ganze zahlen für die Höhe der Werte.

InformationsquelleAutor Andras Vass
0

Ich hatte das ähnliche problem, das scheint ein Fehler zu sein, obwohl ich bin nicht 100% sicher. Wenn beispielsweise ein bestimmtes element hat Polsterung, die innerHeight() zeigen nicht das gleiche Ergebnis in Webkit und Firefox. Als temporäre Lösung, ich habe sowohl innerHeight() sowie height() um die richtige Höhe für das element.

Ähnlich, ich war nicht in der Lage zu verwenden, die height() zu zeigen, das gleiche in allen Browsern (IE und andere). Ich benutzte so etwas wie dieses, die funktionierte in allen Browsern:
```
$("#element").css('height', '100');
```
Siehe auch innerHeight() und outerHeight() wenn Sie wollen, um die padding /Grenzen /Ränder.

Dank sarfraz. sehen Sie in meinem js-snippet oben, dass ich mit innerHeight(), und auch, dass ich erwähnt, die versucht alle jQuery verschiedener Höhe Funktionen mit gemischt, aber falsche Ergebnisse.

InformationsquelleAutor Sarfraz
0

Firefox ist ein Stück Scheiße. Hinzufügen eines container <div> und läuft outerHeight() auf, die das Problem behebt.

InformationsquelleAutor Steven Vachon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.