使用jQuery的問題刪除（）內嵌塊的元素

我有一個水平線的div元素是display:inline-block和頂部對齊。使用jQuery的問題刪除（）內嵌塊的元素

我可以添加元素，並擴展行。當我通過將寬度設置爲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>

來源

2010-02-11 user113716

那麼，這是我的解決方案，如果任何人有興趣。

我最終修改了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:，在if()語句，它檢查關於「身高」，「寬度」和「this.element.style」，我改變了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瀏覽器。我想如果有人設置了「內聯」元素，並且「縮放」設置爲「正常」以外的任何內容，則可能會導致問題？至於我，我不知道IE甚至直到昨天才接受'zoom'屬性！

來源

2010-02-11 22:01:45 user113716

是的！感謝您的解決方案。在此頁面上有類似的解決方案http://forum.jquery.com/topic/animate-does-not-play-well-with-css-display-box-and-inline-block-as-well，但我更喜歡你的，因爲它緩存測試結果。順便說一下，我希望這個問題在jQuery中得到解決，以便我們不必部署被黑客入侵的版本。:) – harpo 2010-05-19 20:09:29

@harpo - 不客氣。值得投票呢？ ; o）我沒有理解它，但是你可以把修改過的方法放在一個單獨的文件中，這樣jQuery就被覆蓋了。然後你仍然可以使用jQuery的CDN版本。 – user113716 2010-05-19 20:14:33

是的，謝謝。你也回答了我的下一個問題，關於分離使用CDN的mod。我現在正在嘗試。 – harpo 2010-05-19 21:03:44

也許這是關係到事實上，jquery必須將其轉換爲塊元素時動畫其寬度？ This other question可能會發出一些光

來源

2010-02-11 15:41:51

我看了一眼，並假設jQuery可能正在改變'display'屬性。只是不確定爲什麼需要在內聯塊的情況下進行更改。是否有可能避免/重寫該行爲？ – user113716 2010-02-11 16:02:08

我發現瀏覽器支持存在問題，他們儘量保持動畫儘可能的交叉，一些舊的代理不支持。也許與額外的HTML鏈接的解決方案會做到最小的附帶損害？ – 2010-02-11 16:35:35

謝謝你的幫助。我決定只修改一下jQuery，它運行良好。如果您有興趣，我已經發布了我的解決方案。 **再次感謝。** – user113716 2010-02-11 22:02:51

使用jQuery的問題刪除（）內嵌塊的元素

回答

相關問題