IE10通过右对齐删除输入上的填充

Question

我在右对齐的输入字段中遇到了一些关于填充的IE10诡计。

检查这个小提琴http://jsfiddle.net/fhWhn/

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

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

Answer 1

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

我的简单解决方案：

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

Answer 2

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

Answer 3

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

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

我一直在调试相同的行为。我发现迄今为止唯一有用的是：

1. 从输入中删除焦点（即使每个元素明确设置“padding-right”也没有效果，但它有焦点）
2. 将padding-right值设置为不同的值为正确的值（将其设置为正确的值不会触发任何更改，大概是因为布局系统知道计算的CSS值没有改变所以决定不需要重新抽奖）
3. 等待重新绘制（即时 - 或者甚至在超过1或2毫秒后 - 再次将属性设置为正确的值导致没有变化，大概是因为没有按照上面的重新绘制）< / LI>
4. 将属性设置为正确的值（例如，使用$this.css("padding-right", "")，删除任何每个元素的值并允许计算的CSS值接管）。

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

Answer 4

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

示例：

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

Answer 5

您是否尝试添加＆＃39; box-sizing＆＃39;你的css？

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