đệm một đầu vào văn bản trong IE ... có thể?

Tôi có một đầu vào văn bản với một vị trí tuyệt đối tìm kiếm trên nó ... để tạo không gian cho nút tôi đã sử dụng một số phần đệm để giữ cho văn bản không đi theo nút, điều này tốt, nó hoạt động trong firefox, nhưng không phải IE .đệm một đầu vào văn bản trong IE ... có thể?

Thực tế ... Dường như không có phần đệm trên đầu vào văn bản hoạt động ở tất cả trong IE.

Họ có đoạn mã sau


<style type="text/css"> 
#mainPageSearch input { 
    width: 162px; 
    padding: 2px 20px 2px 2px; 
    margin: 0; 
    font-size: 12px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top; 
    border-color:#C6C6C6 #C6C6C6 #E3E3E3; 
    border-style:solid; 
    border-width:1px; 
    color:#666666; 
} 
#mainPageSearch { 
    margin-bottom: 10px; 
    position: relative; /* Lets me absolute position the button */ 
} 
#mainPageSearchButton { 
    display: block; 
    position: absolute; 
    top:0px; 
    right: -2px; 
    text-indent: -2000em; 
    height: 22px; 
    width: 22px; 
    background: transparent url('images/searchBtn.png') top center no-repeat; 
} 
</style> 


<form id="mainPageSearch" action=""> 
    <input type="text"/> 
    <a id="mainPageSearchButton" href="#">Search</a> 
</form>

phải là những gì tôi đang cố gắng để làm tốt hay nên tôi chỉ hút nó lên và đối phó với các văn bản đi dưới nút tìm kiếm?

Tôi biết tôi có thể tạo hộp tìm kiếm có nền/đường viền trong suốt và vẽ kiểu bằng cách sử dụng div chứa ... nhưng đó thực sự không phải là tùy chọn vì số lượng địa điểm tôi phải thay đổi trang web.

Có lẽ tôi sẽ tạo một lớp mới cho đầu vào văn bản này làm cho nó trong suốt và gán kiểu nhập văn bản thông thường cho div chứa? Bạn nghĩ sao?

chỉnh sửa: xin lỗi tôi nên tôi đã bao gồm các loại tài liệu được ... ở đây là:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

cũng có, Những vấn đề tôi đang gặp là trong IE 7

Nguồn

2009-03-03 Jiaaro

thử sử dụng line-height

Nguồn

2009-12-15 23:12:34 chris

Tôi cuối cùng đã vượt qua khả năng này nhưng, câu trả lời của bạn chắc chắn xứng đáng là một upvote :) – Jiaaro

Hmm .... điều này dường như làm việc khá tốt qua trình duyệt và là giải pháp tốt nhất tôi đã nhìn thấy cho đến nay. Tuy nhiên nó làm cho kích thước của con trỏ khác nhau trong Chrome và IE (hơi lệch trung tâm, hoặc cao hơn) mà là hơi khó chịu. –

Khó chịu phiền toái == không để spec. Tôi nghĩ rằng tôi sẽ sử dụng hack của Filip. –

Bạn sẽ phải sử dụng phao: trái/phải trên '#mainPageSearch input' trước khi bạn có thể áp dụng padding/margin.

Nguồn

2009-03-03 16:56:17

Cảm ơn! Đó là hack tôi đã tìm :) ngu ngốc IE – Jiaaro

xin lỗi để cho nó và sau đó mang nó đi ... sau khi áp dụng nó vào trang web (không phải tập tin thử nghiệm của tôi) nó làm cho nút biến mất – Jiaaro

Tôi có các công việc sau đây trong IE7. Bạn đang nhắm mục tiêu phiên bản nào?

<style type="text/css"> 

    input#test { 
     padding: 10px; 
    } 

</style> 


<input type="text" id="test" />

Nguồn

2009-03-03 16:57:55

Tôi thực sự chỉ muốn đệm trên bên phải sao cho văn bản sẽ không đi dưới nút kính lúp nhỏ mà tôi đã định vị tuyệt đối trên thanh tìm kiếm – Jiaaro

hãy thử điều đó cho any you ' sẽ thấy rằng không có padding được áp dụng. –

tôi gặp phải vấn đề tương tự - IE được đệm lĩnh vực đầu vào, nhưng không làm cho nó lớn hơn, do đó đẩy văn bản xuống bên trong của nó. Tôi cố định nó bằng cách thiết lập chiều cao của đầu vào là tốt. Hãy thử điều đó.

Nguồn

2010-07-28 22:39:42

Tôi có vấn đề này cũng có thể tôi giải quyết nó bằng cách thêm dòng sau

input 
{ 
    overflow:visible; 
    padding:5px; 
}

hy vọng điều này giúp? Cho tôi biết.

Nguồn

2011-03-18 22:26:39

Cảm ơn vì điều này. Tôi đã có cùng một vấn đề và điều này làm việc cho tôi. Chúc mừng. –

yeah overflow: hiển thị đã làm các trick cho tôi quá trong IE7 – nerdess

Hãy thử border-right thay vì padding-right. Điều này làm việc cho tôi.

Nguồn

2011-06-24 11:45:30 Olli

Nếu bạn muốn có một hình ảnh nền để hiển thị thông qua biên giới, hãy chắc chắn rằng phong cách biên giới không phải là "rắn". –

Làm việc cho tôi .. –

Hãy kiểu đầu vào của bạn minh bạch và diễn ra bên trong một div container:

http://jsfiddle.net/LRWWH/211/

HTML

<div class="input-container"> 
<input type="text" class="input-transparent" name="fullname"> 
</div>

CSS

.input-container { 
    background:red; 
    overflow:hidden; 
    height: 26px; 
    margin-top:3px;   
    padding:6px 10px 0px; 
    width: 200px; 
    } 

.input-transparent { 
    background-color:transparent; 
    border:none; 
    overflow:hidden;   
    color:#FFFFF; 
    width: 200px; 
    outline:none; 
    }

Nguồn

2012-04-06 13:22:21

Có một css chỉ sửa chữa cho nó

div.search input[type="text"] { 
    width: 110px; 
    margin: 0; 
    background-position: 0px -7px; 
    text-indent:0; 
    padding:0 15px 0 15px; 
} 
/*ie9*/ div.search input[type="text"] { 
    border-left: 25px solid transparent; 
} 
/*ie8*/ div.search input[type="text"] { 
    border-left: 25px solid transparent; 
    background-position-x: -16px; 
    padding-left: 0px; 
    line-height: 2.5em; 
}

Cảm ơn Muhammad Atif Chughtai

Nguồn

2013-03-14 11:59:02 user2169658

Đây là câu trả lời được cung cấp mã duy nhất hoạt động trong IE cũ. – Raptor

gì về tuyên bố DOCTYPE?

Bằng cách thêm <!DOCTYPE html> công việc đệm lớn cho tôi trong IE8. Hãy lấy đoạn mã sau làm ví dụ:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #myInput { 
     padding: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="myInput" value="Some text here!" /> 
    </body> 
</html>

Nguồn

2013-05-27 11:08:44

đệm một đầu vào văn bản trong IE ... có thể?

Trả lời

Các vấn đề liên quan