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

Question

我有一个带有 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)，包装它位于包装 div (this.wrapper) 中，并带有 overflow: hide 以及元素的 margin 和 position然后删除元素的margin。

因此，删除边距是设计使然。 我不明白的是为什么边距没有转移到包装纸上。 您可能有一些 CSS 修改了使用 !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 框架我个人认为 它比 jQuery 更强大（不包括 jQuery 拥有庞大社区的事实）。 不幸的是，More 包（相当于 jQuery 的插件）在某些方面缺乏一致性。