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

Question

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

在几乎所有的浏览器中,除了MSIE 9之外,这个工作得很好和花花公子.[编辑]虽然框保持相同的大小,表明两个属性的CSS都已正确更新,但输入/ textarea中的文本表现得好像填充没有改变.我知道focus/ blurevents 的回调正在正确触发和更新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，它也将起作用，并且您可能可以围绕额外的像素进行编程。