6

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

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

IE

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

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

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

有没有办法强制浏览器重绘给定元素，而无需经历将其删除并重新插入 DOM 的过程？

[编辑]

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

http://jsfiddle.net/KYrXM/

您将看到填充已更新，但在您开始键入之前没有可见的更改。

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

4

2 回答 2

1

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

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

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

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

于 2012-09-12T03:32:55.123 回答
0

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

$('#your-input-element').replaceWith($('#your-input-element').clone());
于 2013-04-12T10:14:46.837 回答