Question

我有<div> CSS规则margin: 0 auto;，我正在使用MooTools在必要时滑动它。

似乎仅仅Fx.Slide对象的实例化会删除元素上的边距。也就是说，虽然元素过去在其父元素内居中，但它现在是左对齐的。仅仅这一行似乎就是这样做的：

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

我可以通过这样做来抵消这种影响：

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

但这很粗糙，我当然不希望每次遇到这种情况都要这样做。更重要的是，我想知道，为什么 MooTools首先取消了保证金？有没有我不知道的选项，我忽略了一些参数？请告诉我，因为我是MooTools的新手。虽然我很快发现它的应用程序远远超过jQuery（至少在我的目的），我发现它的文档比它的语法简洁得多。

Answer 1

来自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;
    },

    /* .. */

正如您所看到的，Fx.Slide接受您应用的元素（this.element），将其包装在包含this.wrapper的包装div（overflow: hidden）和margin中{1}}和position元素，然后删除元素的margin。

因此，删除margin是设计使然。我不明白的是为什么保证金没有转移到包装器。您可能在使用!important的父元素中修改了一些简单DIV，并阻止Fx.Slide正确传输属性。

您是否将MooTools 1.2.3与最新版本的MooTools More（1.2.3.1）一起使用？

此外，要使Fx.Slide正常工作，您的网页需要才能处于标准模式。您是否在标记中首先使用XHTML或HTML（严格或过渡）文档类型？（没有XML序言）。最坏的情况是，如果仍然无效，请使用以下内容：

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

MooTools是一个很棒的JavaScript框架，我个人认为it is way more powerful than jQuery（不包括jQuery拥有庞大社区的事实）。不幸的是，More包（相当于jQuery的插件）的一致性在某些方面有些缺乏。

为什么MooTools在创建Fx.Slide实例时会删除边距？

1 个答案: