对内联块元素使用 jQuery remove() 时遇到问题

Question

我有一条水平线 div 元素，它们是 display:inline-block 并且顶部对齐。

我可以添加元素，并且行会扩展。当我通过将宽度设置为 0 来移除元素时，该线不会保留其单线外观，而是会强制在动画期间临时出现第二条线。

在 IE、Webkit 和 Firefox 中的行为是相同的。

我可以改变界面来避免这个问题，但我仍然想知道是什么原因造成的，以及如果可能的话如何修复它。

这是一个按比例缩小的问题示例。

body {
    text-align: center;
}
#container {
    height: 20px;
    border: 1px dashed #AAA;
    background: #EEE;
    margin: 0 auto;
    display:table !important;
    display: -moz-inline-stack;  /* Pre FF3 fix */
    display: inline-block;
    zoom: 1;                    /* IE fix */
    *display: inline;           /* IE fix */
}
.item {
    cursor: pointer;
    width: 50px;
    height: 18px;
    border: 1px solid purple;
    vertical-align: top;
    display: inline-block;
    color: white;
    vertical-align: top;
    display: -moz-inline-stack;  /* Pre FF3 fix */
    display: inline-block;
    zoom: 1;                    /* IE fix */
    *display: inline;           /* IE fix */
}
.outer {
    background: orange;
}


$('#add').click(function() {
    $(this).before('<div class="item"></div>')
});

$('#add').click().click().click()

$('.item:not(.outer)').live('click', function() { 
    $(this).animate({width: 1, paddingLeft: 0}, 1000, function() {$(this).remove()}); 
});

<div id="container"><div class='item outer'></div><div id="add" class="item outer">Add</div></div>

Answer 1

好吧，如果有人感兴趣，这是我的解决方案。

我最后只是稍微修改了 jQuery 的源代码，它似乎运行良好。然后我通过必要的调整将更改滑入缩小版本。

这是我所做的（对于非缩小版）：

在 jQuery 的 animate: 函数中，在检查“高度”和“宽度”的 if() 语句中，我添加了以下内容：

// Detect inline-block standard, pre ie8 fix, and pre Firefox 3 fix
opt.ibCheck =(jQuery.css(this,'display') === 'inline-block') || 
            (jQuery.css(this,'zoom') !== 'normal' && jQuery.css(this,'display') === 'inline') || 
            (jQuery.css(this,'display') === '-moz-inline-stack');

然后在jQuery.fx.prototype.update: 中，在检查“height”、“width”和“this.element.style”的if() 语句中，我将if() 语句更改为以下内容：

if ( ( this.prop === "height" || this.prop === "width" ) && this.elem.style && !this.options.ibCheck ) {

...检查在“animate”中设置的 ibCheck 属性。

一切似乎都运行良好。它检查 inline-block、常见的 pre-Firefox 3 修复或 pre-ie8 修复。如果找到，它将 ibCheck 设置为“真”。如果 ibCheck 为“真”，update() 函数不会将显示更改为“阻止”。

对 IE 可能有更好的检查。我想如果有人为“内联”元素设置动画，将“缩放”设置为“正常”以外的任何内容，可能会导致问题？至于我，直到昨天我才知道 IE 甚至接受了“缩放”属性！

Answer 2

也许这与jquery在为其宽度设置动画时必须将其转换为块元素的事实有关？ This other question 可能会有所启发