Question

我有一个简单的脚本，分别在padding-left / focus上添加和删除blur到textareas / inputs。这是为了在场地的左侧为一个小的，绝对定位的按钮腾出空间，而不会阻挡它下方的文本。 [编辑]它同时改变元素的宽度，以保持块的总大小一致。

在几乎所有的浏览器中，除了MSIE 9之外，这个工作正常而花哨。[编辑]虽然框保持相同的大小，表明两个属性的CSS都已正确更新，但输入/ textarea中的文本表现得像填充一样没有改变。我知道focus / blur事件的回调正在触发并正确更新DOM对象的样式属性，因为获取属性的当前值总是会给出预期的值。

即

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

然而，input / textarea字段中的文本仍显示前一个填充。基本上，当您尝试同时更改宽度和填充时，某些内容似乎会混淆MSIE9的渲染引擎在这些字段中出现。

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

有没有办法强制浏览器重绘某个给定的元素而不经历删除并重新插入DOM的戏剧？

[编辑]

这是一个小提示，显示代码的缩写形式（在其实际上下文中具有附加功能）：

http://jsfiddle.net/KYrXM/

您将看到填充更新，但在您开始输入之前不会进行任何可见的更改。

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

Answer 1

我不明白为什么会这样;肯定是IE9中的一个错误，但是如果您将填充设置为空字符串''而不是'0px'，则可以正常工作。

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

这是一个工作小提琴：http://jsfiddle.net/KYrXM/4/

或者，如果您将其设置为1而不是0，它也可以工作，您可以编写额外的像素。

Answer 2

这会强制重绘并解决问题（但这是一个丑陋的黑客）：

$('#your-input-element').replaceWith($('#your-input-element').clone());

MSIE9 - 当宽度和填充的CSS同时调整时，input / textarea中的文本不服从当前填充

2 个答案: