input輸入框和 pure框架中的 box-sizing 值問題

在使用pureCSS框架的時候，遇到一個問題。 input輸入框，我給他們設置了寬度和padding值，我發現，在火狐和谷歌上面發現，增長padding值並不會影響最終的寬度，而在IE6 7下則會影響寬度。後來發現是pure框架爲輸入框設置了box-sizing致使（IE6 7不支持），我得分別設置不一樣的寬度。  因此，在使用這個框架的時候， 爲了統一，應該設置   input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; }

如下是查找的資料：   來源： http://segmentfault.com/q/1010000000413229

 

input文本框輸入內容須要縮進，使用text-indent和padding-left有哪些區別，用哪一個好？

總的來講，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所示。這是須要額外考慮的事情。