javascript - MSIE9 -- 当同时调整宽度和填充的 CSS 时，输入/文本区域中的文本不服从当前填充

Question

我有一个简单的脚本，可以分别在 focus/blur 的文本区域/输入中添加和删除 padding-left。这是为了在字段左侧为一个绝对定位的小按钮腾出空间，而不会阻挡其下方的文本。 [编辑] 它还同时更改元素的宽度，以保持 block 的总大小一致。

在几乎所有浏览器中，这都工作得很好，但 MSIE 9 除外。 [编辑] 尽管框保持相同大小，表明两个属性的 CSS 已正确更新，但输入/文本区域中的文本表现得好像填充没有改变。我知道 focus/blur 事件的回调会正确触发和更新 DOM 对象的样式属性，因为获取属性的当前值总是会为您提供预期的值。

即

var field = $(field);
field.css({
  'padding-left' : 0
});
console.log(field.css('padding-left')); // '0px'

但是输入/文本区域中的文本仍然显示之前的填充。基本上，当您尝试同时更改宽度和填充时，在这些字段出现的上下文中，似乎有些东西混淆了 MSIE9 的渲染引擎。

只要您开始在字段中键入，MSIE 就会修复该问题并使输入/文本区域中的文本遵循当前填充。意识到这一点，我尝试将 field.val(field.val()); 添加到 blur 和 focus 回调的末尾。这解决了一个问题，并以将插入符号位置重置为输入/文本区域开头的形式引入了另一个问题。

有什么方法可以强制浏览器重绘给定元素，而无需经历将其移除并重新插入 DOM 的过程？

[编辑]

这是一个 fiddle ，显示了代码的缩写形式(在其实际上下文中具有附加功能):

http://jsfiddle.net/KYrXM/

您会看到填充已更新，但在您开始输入之前没有任何可见的变化。

如果我也选择不更改 width 属性，那么这个问题就会消失，尽管我需要这样做才能使我的应用程序中的框大小保持不变。

Answer 1

我不明白这是为什么；绝对是 IE9 中的错误，但如果您将填充设置为空字符串 '' 而不是 '0px'，它就可以工作。

field.css({
  'padding-left' : '' // <- Use '' instead of 0.
});

这是一个工作 fiddle :http://jsfiddle.net/KYrXM/4/

或者，如果您将它设置为 1 而不是 0，它也可以工作，并且您可以围绕额外的像素进行编程。