HTML: IE: Đệm phải trong hộp văn bản đầu vào

Question

Chuyển đến http://jsfiddle.net/srLQH/ và điền vào hộp văn bản đầu vào trong chế độ xem "Kết quả".

Nếu bạn làm điều này trong FF, Chrome và Safari, văn bản của bạn sẽ dừng ngắn 20px bên phải.

Trong IE 7/8, văn bản không dừng ngắn 20px - nó sẽ chuyển tới mép của hộp nhập liệu.

Thỏa thuận với IE là gì? Làm thế nào tôi có thể nhận được cùng một hiệu ứng đệm trong IE mà tất cả các trình duyệt khác cung cấp cho tôi?

Answer 1

Hãy thử ví dụ này hacks

input{ 
padding-right : 20px /* all browsers, of course */ 
padding-right : 20px\9; /* IE8 and below */ 
*padding-right : 20px; /* IE7 and below */ 
_padding-right : 20px; /* IE6 */ 
} 

bản demo

http://jsfiddle.net/srLQH/2/

Mẹo

đệm không làm việc tốt với các yếu tố hình thức html tức textarea đầu vào như mà cố gắng thay đổi nó để lề

input{ 
margin-right : 20px /* all browsers, of course */ 
margin-right : 20px\9; /* IE8 and below */ 
*margin-right : 20px; /* IE7 and below */ 
_margin-right : 20px; /* IE6 */ 
} 

vì trong jsfiddle, bạn phải yếu tố duy nhất, tại sao không bạn cố gắng

lề trái thay vì lề phải

Answer 2

Có vẻ như IE là applyi ng CSS, chỉ cần không cho đến cuối cùng của dòng. Nghĩa là, padding bị ảnh hưởng bởi giá trị, thay vì giá trị bị ảnh hưởng bởi padding.

Khi đặt độ đệm thành 20px theo chiều dài với giá trị mặc định dài hơn chiều rộng mặc định, bạn có thể cuộn đến cuối và xem phần đệm. http://jsfiddle.net/dZyzr/

Bạn sẽ phải tìm ra một số mẹo hình ảnh hoặc chỉ sử dụng một biểu định kiểu khác cho IE.

Answer 3

Chỉ cần bỏ qua nó trong phần tử khác làm đệm trong IE, chẳng hạn như div. Sau đó, bạn không cần phải lo lắng về hacks xấu xí vô hiệu hóa stylesheet css của bạn. Hãy nhớ để loại bỏ các padding từ đầu vào để nó không làm phiền các trình duyệt khác. Đây cũng là cách duy nhất để cung cấp cho một hộp văn bản một hình ảnh nền mà không di chuyển với văn bản trong IE.

Answer 4

Tôi đã tìm thấy một cách để làm điều đó, nhưng nó không đẹp.

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]> 
<style type="text/css"> 
input { 
    border: none; 
    margin: 5px; 
    padding-right: 0px; 
} 
.wrapper { 
    border: 1px #aaa inset; 
} 
.spacer{ 
    margin-left: 20px; 
} 
</style> 
<![endif]--> 


<span class='wrapper'> 
    <input type='text' /> 
    <span class='spacer'></span> 
</span>​ 

Answer 5

Tôi đã được tìm kiếm một cách để giải quyết này. Một đồng nghiệp tìm thấy một giải pháp và chúng tôi đã thử nghiệm nó và nó hoạt động hoàn hảo. Vì vậy, điều cần xóa là padding: right và thêm border: 20px solid transparent.

Answer 6

Bạn có thể sử dụng tài sản css text-indent cho yếu tố này:

Đối example:

<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" /> 

Answer 7

Đây là một câu hỏi cũ, nhưng tôi cố định này trong IE10 bằng cách làm theo này:

Cách sửa lỗi này cho IE-10:

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

Hoặc cho một đầu vào cụ thể:

.anyinput::-ms-clear { 
    display: none; 
} 

Xem thêm thông tin ở đây: http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html

Answer 8

Tôi biết câu hỏi này là cũ, nhưng sau khi rất nhiều tìm kiếm, tôi tìm thấy một giải pháp mà làm việc.

Bạn có thể thêm "đệm" trở lại IE bằng cách thêm lề trên giá trị sử dụng như sau.

đệm đầu vào mặc định

 

    input[type="text"]{ 
     padding-left:17px; 
     padding-right:17px; 
    } 

đệm cho IE đầu vào

 

    input[type="text"]::-ms-value { 
     margin-left:17px; 
     margin-right:17px; 
    } 

nhưng sau đó bạn sẽ cần phải loại bỏ các đệm cho IE 10+ (vì vậy nó không sử dụng cả hai) mà bạn có thể thực hiện với truy vấn phương tiện này.

 

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
     input[type="text"] { 
      padding-left:0; 
      padding-right:0; 
     } 
    }