使用 JQuery 插入 INPUT 字段时如何控制表格单元格宽度

Question

我在针对 webkit 的网页上有一个就地编辑功能。 HTML 很简单。

我使用 jQuery 将单击处理程序附加到每个单元格：

$("table td").click(editMe);

function editMe(e) {
  var w = $(this).width();  // returns cell width
  $(this).html("<span>Foo</span");  // does not change table width
  $(this).html('<input type="text" />');  // CAUSES CELL width to BLOW UP! (gets VERY wide)

  var in = $('<input type="text" />');
  in.width(w-10);
  $(this).html(in);    // CAUSES CELL WIDTH TO BLOW UP!  (nearly doubles)
}

设置多少宽度似乎没有任何区别。输入没有填充或边距，没有边框。表格单元格的宽度变得疯狂。重点是 Webkit (Safari / Adob​​e AIR)。但为什么？

如何让输入尺寸与其要插入的表格单元格匹配？

Answer 1

好的，
我没有得到确切的答案，但事实证明罪魁祸首在于960Grid CSS框架的reset.css文件中。我不知道到底是哪个设置导致了奇怪的行为，但删除该文件修复了它。

960Grid 是一个我喜欢使用的简单 CSS 框架，但是他们的 reset.css 文件中的一些内容导致我的表格崩溃了。当我删除该文件后，表的行为就如预期的那样。