IE10 loại bỏ đệm trên đầu vào với căn chỉnh phải

Question

Tôi đã gặp một số vấn đề liên quan đến việc đệm padding trong trường nhập liệu phù hợp.

Kiểm tra fiddle này http://jsfiddle.net/fhWhn/

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

này loại bỏ các "biểu tượng IE10" nhưng tôi phải làm gì nếu tôi muốn giữ những điều này và giữ cho đệm của tôi? Có cách nào khác, thông minh hơn, cách giữ padding sau onblur?

Answer 1

bạn có thử thêm 'kích thước hộp' vào css của mình không?

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

Answer 2

Edit: giải pháp của Eric làm việc cho tôi và rất đẹp, nhưng tôi rời khỏi câu trả lời này đây trong trường hợp một số phiên bản tương lai của IE cần một sửa chữa khác nhau

New IE, vẽ New IE-cụ thể vấn đề ...

Tôi đã gỡ lỗi cùng một hành vi. Điều duy nhất tôi đã tìm thấy rằng làm việc cho đến nay là:

1. Loại bỏ tập trung từ đầu vào (thậm chí thiết lập một cách rõ ràng “padding-right” mỗi nguyên tố không có tác dụng khi nó có tập trung)
2. Thiết padding Giá trị đúng cho giá trị chính xác giá trị giá trị chính xác (đặt giá trị chính xác sẽ không thay đổi, có lẽ do hệ thống bố trí biết giá trị CSS đã tính không thay đổi nên quyết định không cần vẽ lại)
3. Đang chờ vẽ lại (ngay lập tức - hoặc thậm chí sau khi hết thời gian chờ 1 hoặc 2 mili giây - đặt lại thuộc tính thành giá trị chính xác không thay đổi, có lẽ là do không tái vẽ đã diễn ra như trên)
4. Đặt thuộc tính thành giá trị chính xác (ví dụ: sử dụng $this.css("padding-right", ""), loại bỏ bất kỳ giá trị mỗi phần tử nào và cho phép giá trị CSS được tính toán tiếp quản).

Tuy nhiên, điều này tất nhiên không mong muốn vì nó liên quan đến việc loại bỏ tiêu điểm khỏi đầu vào khi người dùng có thể đang gõ.

Answer 3

Tôi đã gặp phải vấn đề tương tự này. Để có được đệm lại, chỉ cần đặt giá trị của hộp văn bản bị mờ.

giải pháp đơn giản của tôi:

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

Answer 4

Sự chỉnh sửa có là sử dụng phong cách direction: rtl; trên đầu vào của bạn, mà sẽ di chuyển × sang phía bên trái của phần tử. Tuy nhiên, hành vi sử dụng từ phải sang trái có thể không lý tưởng cho trường hợp của bạn.

Answer 5

Câu trả lời của JustinStolle là cách tiếp cận tốt nhất, tôi nghĩ vậy.

Ví dụ:

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