最近遇到一個問題，那就是input在IE系列中對padding的支持不夠好。如果我們給input定義padding-left和padding-right，希望輸入的文字距離左右邊框有一定的距離，再加上背景圖片，實現一個像bing那樣的輸入框效果。但是，這樣的想法固然好，但是在IE下會不盡如人意。查看bing的搜索框才知道，原來它的的搜索框圖片和輸入文字根本就不是一個input搞定的，而是分開實現的（這個非常常見）。於是我在網絡上開始查找問題的原因，很多人把這個問題歸結於IE的bug，但是，經過學習和嘗試，我個人認為這不應該算是bug，而是在處理和顯示上存在着不同。
先看一個例子，代碼：
vertical-align: middle;
height: 20px;
background: #fff url(../images/bg/input_bg.png) repeat-x ;
line-height: 20px;
border: 1px solid #aebad7;
color: #333;
text-align: left;
font-size: 12px;
padding: 1px 24px 0 4px;
font-family: 'lucida grande',helvetica,verdana,arial,sans-serif;
}
以上代碼是我工作中的一個實際例子，在FF9下和IE下的效果如下：
左圖的padding-right:24px;生效了，在輸入ABCDEFG后，未顯示的被隱藏了，把下箭頭的圖片的位置空了出來，這是我們希望的。但是在IE全系列下，后面的字母貌似忽視了這個padding-right，大家會把這個歸結於IE的bug，認為它對padding-right不支持。其實，IE是支持padding-right的，只不過，顯示的方式不是我們想想的那樣。經過和同事交流和討論，我認為這個padding-right實際上存在。下面簡單說明下我的看法。
先看看這個：
padding: 0px 80px;
}
這個代碼很簡單，就是將左右的邊框內間距設定為80px，在FireFox下，它顯示的如我們想象的那樣：
圖中為FrieFox的顯示結果。我們看到左右input中左右兩側的間距已經空出來，這樣，我們可以在input中添加背景圖片，做成如上面的圖中的那個效果。但是，在IE下，它的顯示並不盡如人意。
可以看出，padding-right在輸入過多文字后，並沒有使輸入光標與右邊框保持80px的距離。這是為什么呢？原因是IE將padding-right看作是輸入文本距離文本邊界為80px，而不是文本顯示域和邊框間的距離。
上圖可以清晰的顯示出原因，當input中輸入文本時，padding-right和padding-left是在文本中體現的，圖中黑色邊界就是文本域，可以看到文本的左右都有間距，這就是padding。紅色的框就是input的邊框，超出紅色邊框的其他內容是被蓋住了，所以，可以看出，在input框來看，文字是到達了input的邊框，隨着文字的輸入，input框（就是紅色的框）會向右側移動，一直到文本域的右邊界。有一點可以證明的就是，當你寫很多內容的時候，用鼠標在input框中全選，當全選到最右側的時候，是能看到這個padding-right的。如下圖
相反，FireFox中的padding-right和padding-left是定義在input框上的，相當於在上圖的紅色邊框上添加這個padding而不是黑色的邊框。這就是為什么在FireFox，Chromes等瀏覽器上顯示正常。（FireFox7貌似和IE的一樣。）
圖中黑色的框為文本域，紅色的框為input的邊框，藍色的框為padding定以后的顯示域，可以看到，在input框中，無論文本寫了多少，籃框內的文字才會被顯示，因此，input框總會有左右兩個間距，這就是我們預想的效果，也是非IE顯示的結果。 因此，我們要向實現類似的這樣的效果，如果非要實現各瀏覽器兼容，就需要通過div包裹一個input，然后padding的效果由div來負責實現了。
當然， 這僅僅是我個人通過實踐和網絡上學習得到的結果。僅供參考，如果大家有不同意的看法，也歡迎討論和交流。