IE10消除了對輸入填充右對齊

Question

我已經遇到了一些IE10 wierdness關於在右對齊inputfield填充。

檢查這個小提琴http://jsfiddle.net/fhWhn/

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

這將刪除「圖標IE10」但我該怎麼辦，如果我想保持這些，並保持我的填充？ 在onblur之後還有另一種更智能的方法來保持填充嗎？

Answer 1

有你嘗試添加「盒大小」到你的CSS？

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

Answer 2

編輯：埃裏克的解決方案爲我，是更漂亮，但我在這裏的情況下，離開這個答案的一些未來版本的IE需要一個不同的修復

新IE，新的IE特有的渲染問題...

我一直在調試相同的行爲。我發現，到目前爲止的工作的唯一的事情是：

1. 從輸入刪除焦點（甚至明確設置「填充右」每個元素有沒有效果，同時它具有焦點）
2. 設置填充-right值到不同值的正確值（將其設置爲正確的值不觸發更改，大概是因爲佈局系統知道計算出的CSS值沒有改變，所以決定不需要重新繪製）
3. 等待重新繪製（立即 - 或者甚至在1或2毫秒的超時之後 - 再次將屬性設置爲正確的值不會導致改變，大概是不引起再拉已經發生按照上文）
4. 將該屬性設置爲正確的值（例如使用$this.css("padding-right", "")，它刪除任何元素值並允許計算的CSS值接管）。

然而，這當然是不期望的，因爲其涉及從輸入去除焦點，當用戶可能在打字的中間。

Answer 3

我跑在這個同樣的問題。要獲得填充，只需將文本框的值設置爲模糊。

我簡單的解決方案：

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

Answer 4

可能的解決方法是使用樣式direction: rtl;您的輸入，這將移動×的元素的左側。但是，使用從右到左的行爲可能不適合您的情況。

Answer 5

JustinStolle的回答是最好的方法，我想。

例子：

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