Warum entfernt MooTools den Rand beim Erstellen einer Instanz von Fx.Slide?

Question

Ich habe eine <div> mit der CSS-Regel margin: 0 auto; und ich bin mit MooTools es gleiten kann, wenn nötig.

Es scheint, dass die bloße Instantiierung eines Fx.Slide Objekt auf meinem Element den Rand entfernt. Das heißt, während das Element innerhalb seines Elternteils zentriert war, ist es jetzt linksbündig. Nur allein diese Linie scheint dies zu tun:

var slide = new Fx.Slide('mydiv'); 

ich etwas zu tun, wie dies diesen Effekt entgegenwirken kann:

var slide = new Fx.Slide('mydiv'); 
$('mydiv').setStyle('margin', '0 auto'); 

Aber das ist grob und ich will sicher nicht, dies zu tun haben jedes Mal, wenn ich auf diese Situation stoße. Und noch mehr möchte ich wissen, warum MooTools die Marge an erster Stelle entfernen? Gibt es eine Option, die ich nicht kenne, einige Parameter, die ich vernachlässigt habe? Bitte lassen Sie es mich wissen, da ich neu bei MooTools bin. Während ich schnell feststelle, dass seine Anwendungen weit über denen von jQuery liegen (zumindest für meine Zwecke), finde ich, dass ihre Dokumentation viel weniger ausführlich ist als ihre Syntax.

Answer 1

Von Fx.Slide.js:

Fx.Slide = new Class({ 

    /* .. */ 

    initialize: function(element, options){ 
     this.addEvent('complete', function(){ 
      this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0); 
      if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper); 
     }, true); 
     this.element = this.subject = document.id(element); 
     this.parent(options); 
     var wrapper = this.element.retrieve('wrapper'); 
     this.wrapper = wrapper || new Element('div', { 
      styles: $extend(this.element.getStyles('margin', 'position'), {overflow: 'hidden'}) 
     }).wraps(this.element); 
     this.element.store('wrapper', this.wrapper).setStyle('margin', 0); 
     this.now = []; 
     this.open = true; 
    }, 

    /* .. */ 

Wie Sie sehen können, nimmt Fx.Slide das Element (this.element) Sie es anwenden, wickelt es in ein Wrapper div (this.wrapper) mit overflow: hidden und die margin und position des Elements und entfernt dann die margin des Elements.

So ist die margin Entfernen von Design. Was ich nicht verstehe ist, warum der Rand nicht auf den Wrapper übertragen wird. Möglicherweise verfügen Sie über einige CSS-modifizierende einfache DIVs im übergeordneten Element, das !important verwendet und verhindert, dass Fx.Slide die Eigenschaften ordnungsgemäß übertragen.

Verwenden Sie MooTools 1.2.3 mit der neuesten Version von MooTools More (1.2.3.1)? Auch

, für Fx.Slide richtig zu arbeiten, um Ihre Seite Bedürfnisse im Standardmodus sein. Haben Sie einen XHTML- oder HTML-Code (Strict Or Transitional) als erstes in Ihrem Markup? (Kein XML-Prolog). Im schlimmsten Fall, wenn es immer noch nicht funktioniert, verwenden Sie die folgenden Schritte aus:

$('mydiv').getParent().setStyle('margin', '0 auto'); 

MooTools ist groß JavaScript-Framework, mit zu arbeiten und ich persönlich finde, dass it is way more powerful than jQuery (mit Ausnahme der Tatsache, dass jQuery eine große Gemeinschaft hat). Leider mangelt es in einigen Aspekten an der Konsistenz des Pakets More (das der Konsistenz der jQuery-Plugins entspricht).