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

Posted 2023-05-08

【中文标题】对内联块元素使用 jQuery remove() 时遇到问题

【英文标题】：Trouble with using jQuery remove() on elements that are inline-block

【发布时间】：2011-01-15 18:36:25

【问题描述】：

我有一条水平线 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>

【参考方案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 甚至接受了“缩放”属性！

【讨论】：

是的！感谢您的解决方案。此页面forum.jquery.com/topic/… 上有类似的解决方案，但我更喜欢您的解决方案，因为它缓存了测试结果。顺便说一句，我希望这在 jQuery 中得到修复，这样我们就不必部署被黑的版本。 :)

@harpo - 不客气。也许值得一票？ ;o) 我还没有解决这个问题，但是您可以将修改后的方法放在一个单独的文件中，以便覆盖 jQuery。然后你仍然可以使用 jQuery 的 CDN 版本。

好的，谢谢。您还回答了我的下一个问题，关于分离模组以使用 CDN。我现在正在尝试。

@harpo - 谢谢！让我知道结果如何。

【参考方案2】：

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

【讨论】：

我确实看过那个，并假设 jQuery 可能正在更改“显示”属性。只是不确定为什么在内联块的情况下需要更改它。是否可以避免/覆盖该行为？

我发现浏览器支持存在问题，他们试图使动画尽可能交叉，而一些较旧的代理不支持它。也许链接中带有额外 html 的解决方案会以最小的附带损害来做到这一点？

感谢您的帮助。我决定稍微修改一下 jQuery，它运行良好。如果您有兴趣，我已经发布了我的解决方案。 再次感谢。