Chrome/IE表單元格定位幫助

Question

我正在製作一個小腳本來使HTML元素可編輯。當你點擊一個元素時，它會被替換爲一個textarea，並且你基本上可以輸入新的文本。當你按下回車鍵時，textarea被替換爲更新了innerHTML的原始元素。

腳本的演示是在這裏：http://iambot.net/demo/editable/

現在的問題是與內聯表編輯。它在FF 3.6上完美運行，但在Chrome/Safari中，一旦單元格的值被更新，更新的單元格的位置就會向右移動一個單元格的寬度（只需在Chrome/Safari中嘗試演示）。完全混淆了整個桌子。我是一名CSS初學者，無法確定我究竟在哪裏出錯。

任何幫助/指針表示讚賞！謝謝。

Answer 1

我相信它可能與用一個textarea替換一個表格單元格有很大不同的顯示行爲。它也可能與<table>元素的可變寬度有關。然而，爲了簡單起見，我想嘗試看看是否可以簡化以刪除_oldChild的cloneNode()。

我修改你的代碼了一下，在這裏貼吧：

editable.js： http://pastie.textmate.org/private/u4nruhu9pzgjjv5kwigo3q

editable.html：http://pastie.textmate.org/private/hdpib2ksrllotmqi3gzkia

現在對我的作品在Chrome和Firefox，但你可能仍然需要調整一些東西。基本上我只是改變它，以節省.innerHTML值_child，清空_child的內容並將<textarea>（_node）作爲_child的孩子。恢復視圖時，我只是從DOM中刪除_node並恢復_child的內容。

我希望這會有所幫助。如果您有任何問題，請詢問。