input的width和padding-left同時存在時IE兼容問題

總的來講，text-indent不影響元素的最終寬度可是有兼容性問題，padding-left在中國主流瀏覽器IE低版本下影響最終寬度，但在chrome和firefox下不影響寬度，可是能夠經過CSS reset解決多瀏覽器顯示不一的問題，使得他們最終都影響寬度。

---

text-indent和padding-left的基本區別：

• padding-left基於盒模型，適用於inline和block層級的元素
• text-indent基於行內排版，僅僅適用於block層級的元素，做用於block層級的元素的內部第一行文字

幾乎他們全部的表現區分都是這兩者的區分。

padding-left會做用於inline框或block框的左側padding區域，會影響到content-box，而文字子節點會出如今content-box內部，所以全部文字都會左移。

text-indent會做用於block框的第一行文字。不管是文字超過容器的寬度被white-space的相應規則截斷，仍是文字中的回車被white-space的相應規則保留，最終致使第二行第三行第N行出現，後面的第二行第三行第N行都不會應用到相應的indent。text-indent的目的很純淨，就是爲了模擬現實排版需求中的首行縮進效果。

http://jsfiddle.net/humphry/3bSSX/點擊預覽

---

<input type="text">做爲一個inline-block層級的標籤，它是固定單行顯示的（並且還和white-space機制不同），上面所述區別並不存在。

那麼區別在哪裏呢：

1. text-indent基於行內排版，致使應用了direction: rtl以後，text-indent提供的indent出如今右側；padding-left則不受direction影響。 固然，direction這個屬性不經常使用於<input type="text">

2. padding-left基於盒模型，因此box-sizing屬性會和padding-left、width屬性一同影響到元素的最終寬度；而text-indent則始終不會影響元素的寬度。 這很重要，由於webkit和firefox的默認樣式表裏，會設置input元素的box-sizing: border-box，若你同時設置了width和padding-left，會出現webkit/firefox和IE低版本的很大的寬度區別。 所以，用到padding-left時，須要重置webkit和firefox的相應樣式：

input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; } 

重置樣式以後，在全部瀏覽器裏面，有效的padding-left在全部狀況均會加到元素的最終寬度上，如上面jsfiddle所示。這是須要額外考慮的事情。

---

至於前一個回答的text-indent的兼容性問題，出如今IE6/7中，一個原生的inline-block元素會被text-indent拐跑： http://jsfiddle.net/humphry/9zKjL/點擊預覽

IE6(VirtIE6模擬)：

chrome：

把它轉化爲block層級便可解決這個問題： http://jsfiddle.net/humphry/9zKjL/4/點擊預覽

固然，這個時候，它不能和其餘文字混排了。