IE10移除了右对齐输入框的填充。

Question

我遇到了一些关于IE10中右对齐输入框填充的奇怪问题。

请查看这个演示: http://jsfiddle.net/fhWhn/

::-ms-clear, ::-ms-clear{
    display: none;
}

这会移除“IE10图标”，但如果我想保留它们并保持填充，怎么办？ 是否有另一种更智能的方法在 onblur 后保持填充？

- Strange Klitgaard

Answer 1

一个可能的解决方法是在你的输入框上使用样式direction: rtl;，这将把×移动到元素的左侧。然而，使用从右到左的行为可能不适合你的情况。

- JustinStolle

Answer 2

我也遇到了同样的问题。为了恢复填充，只需在文本框失去焦点时设置其值即可。

我的简单解决方案：

$("input[type='text']").blur(function (evt){
    var $element = $(this);
    $element.val($element.val());
});

- Eric

---

经过进一步调查，"x"图标似乎只出现在宽度大于或等于60像素的文本框中，但是在小于60像素的文本框中存在不同的填充问题。幸运的是，我能够将我的文本框宽度增加到60像素，而不必解决那个问题。 - Eric

请注意，这会干扰输入框的“change”事件：聚焦输入框，更改值，然后选择另一个应用程序（即在IE上失去焦点但不失去对IE内输入框的焦点）- 这将触发“blur”事件，上述代码将删除“待处理更改”的记录；将焦点返回到IE并失去对输入框的焦点- 您现在已更改了值，而没有触发任何更改事件。 - Tom Carver

Answer 3

我认为JustinStolle的回答是最好的方法。

例如：

input[type="text"].field-al-right{
    text-align:right;
    direction:rtl;
}

- Lluz Mar

Answer 4

编辑：Eric 的解决方案对我有用并且更好，但是为了防止未来的 IE 需要不同的修复措施，我将保留此答案

新版 IE，新的 IE 特定渲染问题...

我一直在调试相同的行为。到目前为止，我发现唯一有效的方法是：

1. 从输入中删除焦点（即使明确设置每个元素的“padding-right”值也没有效果，因为它具有焦点）
2. 将 padding-right 值设置为不同于正确值的值（将其设置为正确值不会触发任何更改，这可能是因为布局系统知道计算出的 CSS 值未更改，因此决定不需要重新绘制）
3. 等待重新绘制（立即或者在1或2毫秒的超时后 - 再次将属性设置为正确值不会导致更改，这可能是因为按上述方式还没有进行重新绘制）
4. 将属性设置为正确的值（例如使用 $this.css("padding-right", "")，它会删除任何每个元素的值并允许计算出的 CSS 值接管）。

然而，这当然是不可取的，因为它涉及从正在输入的用户中删除输入的焦点。

- Tom Carver

Answer 5

你尝试过在你的CSS中添加'box-sizing'吗？

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}   

- Louis