輸入框自動適應寬度

很早以前就看過ytzong的《寬度自我調整的輸入框》這篇文章，感覺很不錯，非常詳實，YUI的柵格決定寬度，內容決定高度確實很實用。
個人認為ytzong的這個方法有兩點非常麻煩：
•<b><b><input type=」text」></b></b>需要套2層b標籤；
•公式：.fluid-input-inner{padding-right:輸入框左邊框 + 輸入框右邊框 + 輸入框左padding + 輸入框右padding}也很麻煩經常忘記。
前段時間在一個專案中真好用到，同事啄米鳥類比了一個寬度自我調整的輸入框，原理和ytzong的大致相同，但是解決了以上兩個麻煩點。 當然也有不足的地方。
看代碼：

&nbsp;&lt;&nbsp;! DOCTYPE&nbsp;HTML&gt;&nbsp;&lt;html&gt;&nbsp;&lt;head&gt;&nbsp;&lt;meta&nbsp;HTTP-equiv="Content-Type"&nbsp; content="text/html;&nbsp;charset=utf-8"&gt;&nbsp;&lt;style&nbsp;type="text/css"&gt;&nbsp;h2&nbsp;{&nbsp;margin :0;&nbsp;padding:10px&nbsp;0;&nbsp;font-size:14px;&nbsp;} &nbsp;.mod-retweet&nbsp;{&nbsp;background:#E4EFF4; &nbsp;border:1px&nbsp;solid&nbsp;#A8D1E0;&nbsp;padding:3px&nbsp;5px&nbsp;5px;&nbsp;margin-top:5px;&nbsp;} &nbsp;.mod-retweet&nbsp;.mod-retweet-textarea&nbsp;{&nbsp;background-color:&nbsp;#FFFFFF;&nbsp;border:1px &nbsp;solid&nbsp;#64B2D1;&nbsp;margin-bottom:5px;&nbsp;overflow:hidden;&nbsp;padding:2px;&nbsp;position: relative;&nbsp;zoom:1&nbsp;} &nbsp;.mod-retweet&nbsp;.mod-retweet-textarea&nbsp;textarea&nbsp;{padding:&nbsp;0; margin:&nbsp;0;&nbsp;border:0&nbsp;none;&nbsp;font-size:12px;&nbsp;height:80px;&nbsp;line-height:1.5em;&nbsp; width:100%;&nbsp;display:block&nbsp;} &nbsp;.mod-retweet&nbsp;.mod-retweet-textarea&nbsp;input&nbsp;{&nbsp; border:0&nbsp;none;&nbsp;font-size:12px;&nbsp;height:20px;&nbsp;line-height:1.5em;&nbsp;width:100%;&nbsp;} &nbsp;&lt;/style &gt;&nbsp;&lt;title&gt;類比寬度自我調整的輸入框&lt;/title&gt;&nbsp;&lt;/meta&gt;&lt;/head&gt;&nbsp;&nbsp;&lt;body&gt;&nbsp; &lt;h1&gt;類比寬度自我調整的輸入框&lt;/h1&gt;&nbsp;&lt;div&nbsp;class="mod-retweet"&gt;&nbsp;&lt;h2&gt;類比input的自我調整：&lt;/h2 &gt;&nbsp;&lt;div&nbsp;class="mod-retweet-textarea"&gt;&nbsp;&lt;input&nbsp;type="text"&nbsp;name="textfield" &nbsp;id="textfield"/&gt;&nbsp;&lt;/div&gt;&nbsp;&lt;/div&gt;&nbsp;&lt;hr&nbsp;/&gt;&nbsp;&lt;div&nbsp;class=" mod-retweet"&gt;&nbsp;&lt;h2&gt;類比textarea的自我調整：&lt;/h2&gt;&nbsp;&lt;div&nbsp;class="mod-retweet-textarea"&gt; &nbsp;&lt;textarea&nbsp;maxlength="500"&nbsp;rows="5"&nbsp;cols="45"&nbsp;name="bookcontent"&gt;&lt;/textarea &gt;&nbsp;&lt;/div&gt;&nbsp;&lt;/div&gt;&nbsp;&lt;/body&gt;&nbsp;&lt;/html&gt;&nbsp;

可以發現一個非常討厭的地方就是：
•textarea 和 input 文本輸入框的邊框是用套在其外層的容器的border來類比的，textarea 和 input 文本輸入框的本身邊框 border:0 none。 這樣webkit下輸入框focus後，輸入框的邊框在類比的邊框裡面，體驗上有點不爽。
•還有一點非常值得注意的是：textarea的padding和margin一定要重置為0，否則在webkit和opera下會有細小的bug。