在IE中填充文本輸入...可能嗎？

我與置於其上的搜索布頓絕對文本輸入...使空間我使用了一些填充，以保持文本從按鈕，這是很好的去下按鈕，它工作在Firefox，但不是IE 。在IE中填充文本輸入...可能嗎？

其實......這似乎是對文本輸入填充不能在IE的一切工作。

他們有下面的代碼


<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>

是我想要做的可能還是應該我只是用搜索按鈕下的文字去吮吸它和處理？

我知道我可以做一個搜索框與透明的背景/邊框和使用含格繪製的造型......但是這是不是真的，因爲我已經有多少地方都在改變它的選項網站。

也許我會爲這個文本輸入，使得它透明的一個新的階層和普通的文本輸入方式分配到包含div？你怎麼看？

編輯：對不起，我應該已經包括了doctype ...這裏是：

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

也是，我有這個問題在IE 7

來源

2009-03-03 Jiaaro

嘗試使用的line-height

來源

2009-12-15 23:12:34 chris

我終於遇到了這種可能性，但是，您的答案肯定值得讚揚:) – Jiaaro 2009-12-16 14:03:27

嗯....這似乎工作非常好跨瀏覽器，是迄今爲止我見過的最好的解決方案。但是，它確實使得Chrome和IE中的光標大小不同（略微偏離中心或更高），這是輕度惱人的。 – 2010-08-21 18:57:12

你必須在可以應用填充/邊距之前，在'#mainPageSearch輸入'上使用float：left/right。

來源

2009-03-03 16:56:17

謝謝！這就是我正在尋找的黑客:)愚蠢的IE – Jiaaro 2009-03-03 16:57:53

對不起，給它，然後把它拿走......將它應用到網站（不是我的測試文件）後，它使按鈕消失 – Jiaaro 2009-03-03 17:15:25

我在IE7下工作。您定位的是哪個版本？

<style type="text/css"> 

    input#test { 
     padding: 10px; 
    } 

</style> 


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

來源

2009-03-03 16:57:55

我真的只想在右側填充所以文本不會放在我已絕對定位在搜索欄 – Jiaaro 2009-03-04 15:35:46

上的小放大鏡按鈕下面，嘗試爲會看到沒有填充應用。 – 2009-08-24 12:40:00

我經歷了類似的問題 - IE被填充的輸入域，但沒有把它做大，從而推文倒在它的內部。我通過設置輸入的高度來修復它。試試看。

來源

2010-07-28 22:39:42

我有這個問題我也解決它通過添加以下行

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

希望這可以幫助？讓我知道。

來源

2011-03-18 22:26:39

嘗試border-right而不是padding-right。這對我有效。

來源

2011-06-24 11:45:30 Olli

做一個div容器內的輸入透明和地方風格：

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; 
    }

來源

2012-04-06 13:22:21

有一個CSS只判明

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; 
}

感謝穆罕默德與Atif Chughtai

來源

2013-03-14 11:59:02 user2169658

有關聲明DOCTYPE是什麼？

通過添加<!DOCTYPE html>填充作品在我的IE8宏偉。以下面的代碼爲例：

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

來源

2013-05-27 11:08:44

在IE中填充文本輸入...可能嗎？

回答

相關問題