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

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），把它包装在包装DIV（this.wrapper）与overflow: hidden和元素的margin和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的插件相当）的一致性在某些方面有些欠缺。