0

我有一个<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（至少就我的目的而言），但我发现它的文档比它的语法要简洁得多。

4

1 回答 1

2

来自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: hidden其中包含元素的marginand position，然后删除margin元素的 。

所以删除margin是设计使然。我不明白的是为什么边距没有转移到包装器上。您可能有一些 CSS 修改了正在使用的父元素中的普通 DIV，!important并且正在阻止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 的插件）的一致性在某些方面有些欠缺。

于 2009-08-08T16:21:11.017 回答