jQuery .offset() nicht richtige position abrufen

Ich arbeite an einer Website, die dynamisch erstellt facebook-like-buttons über PHP. Jedoch, die <div> Sie, dass die Schaltflächen enthalten, muss die CSS-Eigenschaft overflow: hidden; Dies ist die einzige Möglichkeit, die ich gefunden habe, die arbeitet, um einen zwei-Spalten-format, welche Kräfte sowohl in den Spalten zu erweitern, um die Länge der längste. Das einzige problem mit dieser Methode ist, dass alle facebook-like-buttons platziert in der Nähe der Boden des Behälters abgeschnitten bekommen, wenn jemand darauf klickt und diese erweitern.

Hier ist der Weg ich habe versucht, dieses Problem zu lösen:

1. Verwendung von jQuery, ich Schleife durch alle facebook like-buttons auf der Seite und berechnen Sie Ihre Dokument-offset mit der offset() Methode.

2. Ich dann clone() jede Taste und geben Sie die absolute Positionierung und die berechnete offset mit jQuery css() Methode. Ich hoffe, dass jeder geklonte Schaltfläche platziert wird, in der gleichen position, der button war es geklont aus, wenn ich hängen Sie an das Dokument.

3. Schließlich, dass ich bei jedem alten facebook-like-button ist css visibility: hidden; um es unsichtbar aber noch dauern, bis der Raum, den er vorher auf die Seite. Füge ich die Klone von der facebook-like-buttons ein div ohne die overflow: hidden; Eigenschaft, die über die appendTo() Funktion.

Hier ist mein gesamter code für diesen Prozess:

//Replaces functional facebook recommend buttons with identical ones
//in a div where they won't get clipped when they expand.
//Hides the old buttons so space is still left for new ones
$(window).load(function(){
    $(".fb-recommend").each(function(){ //cycle through each recommend button
        var offset = $(this).offset(); //calculate offset of each button
        var newButton = $(this).clone(); //clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top});
        $(this).css("visibility","hidden"); //hide the old button
        newButton.appendTo("#wrapper"); //put the new button in the wrapper where it won't get clipped
    });
});

Am Ende von all dem, ich nehme an, Klone von jeder Taste platziert, wo der button alt war, aber in einem anderen <div>. Der ganze Prozess funktioniert, außer, dass die geklonten facebook-like-buttons erscheinen in einer etwas anderen position als diejenigen, die Sie geklont wurden von PitaJ Punkte heraus, die Sie zu sein scheinen aus durch die vertikalen offset ein Vielfaches von rund 39px). Sie können die Ausgabe hier:

LINK ZUR TEST-Seite

Wie Sie sehen können, die erste Taste in der korrekten Position (den leeren Raum gefüllt, der durch seine versteckte Klon) aber die anderen offsets wurden nicht korrekt berechnet.

Ich würde schätzen, irgendwelche Ideen oder Hilfe angeboten. Lassen Sie mich wissen, wenn Sie möchten, mir zu erklären, besser oder poste mehr code!

Edit: ich dachte, ich würde post von der CSS-Code für das facebook-like-buttons hier (auch wenn ich nicht ändert, ist die Marge):

#content .fb-recommend {
    margin: 15px 0 5px 0;
}

Edit 2: Als pro UnLoco s Vorschlag habe ich noch eine min-height-Eigenschaft auf die fb-empfehlen und CSS auskommentiert, die Zeile code, die versteckt wurde, die alt-Tasten, so ist es einfacher zu sehen, dass das problem (die ist immer noch da, wenn auch leicht abgeschwächt. Das CSS sieht jetzt wie folgt aus:

#content .fb-recommend {
    margin: 15px 0 5px 0;
    min-height: 39px;
}

Edit 3: scheint Das problem gelöst wurde-in allen Browsern, aber der IE durch änderung der CSS diese:

.fb-recommend {
    min-height: 24px;  //I used 24 because the fb-buttons are 24px in height
}

Final Bearbeiten? Dies scheint zu funktionieren auf allen Browsern auf meinem Ende, einschließlich IE:

.fb-recommend {
    min-height: 39px;
}

Ich bin jetzt denken, dass die 39 haben könnten, kommen aus der 15px margin der alten fb-Taste + seine 24px Höhe. Ich denke, ich kann es umgehen, indem Sie einfach die Einstellung der Höhe zu sein, 39px und nicht mit einem Rand.