IE10 删除右对齐输入的填充答案

【问题标题】：IE10 removes padding on input with right alignmentIE10 删除右对齐输入的填充
【发布时间】：2012-11-25 15:03:35
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

您是否尝试将“box-sizing”添加到您的 CSS 中？

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

【讨论】：

【解决方案2】：

编辑：Eric 的解决方案对我有用，而且更好，但我把这个答案留在这里，以防某些未来版本的 IE 需要不同的修复

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

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

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

但这当然是不可取的，因为它涉及当用户可能正在打字时从输入中移除焦点。

【讨论】：

【解决方案3】：

我遇到了同样的问题。要恢复填充，只需将文本框的值设置为模糊。

我的简单解决方案：

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

【讨论】：

经过进一步调查，“x”图标似乎只出现在宽度大于或等于 60 像素的文本框中，但在 60 像素以下的文本框中存在不同的填充问题。幸运的是，我能够将我的文本框宽度增加到 60 像素，而不必弄清楚这一点。
请注意，这会干扰输入的“更改”事件的引发：聚焦输入，更改值，然后选择另一个应用程序（即在 IE 上失去焦点而不失去对 IE 中的输入的焦点) - 这会引发“模糊”事件，并且上面的代码会删除存在“待更改”的记录；将焦点返回到 IE 并失去对输入的关注 - 您现在已经更改了值而没有触发更改事件。

【解决方案4】：

一种可能的解决方法是在您的输入中使用样式 direction: rtl;，这会将 × 移动到元素的左侧。但是，使用从右到左的行为可能不适合您的情况。

【讨论】：

【解决方案5】：

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

例子：

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

【讨论】：