¿Por qué MooTools eliminar el margen cuando se crea una instancia de Fx.Slide?

Question

Tengo un <div> con el margin: 0 auto; regla CSS y estoy usando MooTools para que se deslice cuando sea necesario.

Parece que la mera ejecución de un objeto Fx.Slide elimina el margen de mi elemento. Es decir, mientras que el elemento utilizado para centrarse en el interior de su padre, es ahora alineado a la izquierda. Sólo esta línea solo parece hacer esto:

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

Puedo contrarrestar este efecto al hacer algo como esto:

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

Pero esto es crudo y ciertamente no quiero tener que hacer esto cada vez que me encuentro con esta situación. Y más aún, quiero saber, ¿Por qué hace MooTools eliminar el margen en el primer lugar? ¿Hay una opción que no sé sobre algún parámetro he descuidado? Por favor, hágamelo saber, como yo soy nuevo en MooTools. Mientras estoy rápidamente encontrando que sus aplicaciones están lejos y por encima de los de jQuery (al menos para mis propósitos), estoy descubriendo que su documentación es mucho menos detallado que su sintaxis.

Answer 1

De 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;
    },

    /* .. */

Como se puede ver, Fx.Slide toma el elemento (this.element) se aplica a la misma, lo envuelve en un div contenedor (this.wrapper) con overflow: hidden y la margin y position del elemento y luego elimina el margin del elemento.

Así que la eliminación de la margin es por diseño. Lo que no entiendo es por qué el margen no se transfiere a la envoltura. Es posible que tenga un poco de CSS modificar DIVs de civil en el elemento padre que está utilizando !important y está impidiendo Fx.Slide de transferir las propiedades correctamente.

¿Está utilizando MooTools 1.2.3 con la última versión de MooTools Más (1.2.3.1)?

Además, para Fx.Slide funcione correctamente, la página debe para estar en modo estándar. ¿Tiene un tipo de documento HTML o XHTML (estricta o de transición) como la primera cosa en su margen de beneficio? (No hay prólogo XML). Peor de los casos, si todavía no funciona, utilice la siguiente:

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

MooTools es un gran marco de JavaScript para trabajar con y yo personalmente considero que it es mucho más poderoso que jQuery (excluyendo el hecho de que jQuery tiene una enorme comunidad). Por desgracia, el paquete More (que es el equivalente de los plugins de jQuery) la coherencia es un poco deficiente en algunos aspectos.