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:函数中，在检查'height'和'width'的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属性。

一切似乎都运作良好。它检查内联块，常见的Firefox 3前修复或pre-ie8修复。如果找到一个，则将ibCheck设置为“true”。如果ibCheck为'true'，update()函数不会将显示更改为'block'。

可以更好地检查IE。我想如果有人动画一个'内联'元素，'zoom'设置为'normal'之外的任何东西，它可能会导致问题？至于我，我不知道IE甚至直到昨天才接受“缩放”属性！

Answer 2

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

在内联块的元素上使用jQuery remove（）的麻烦

2 个答案: