TextArea修正設定寬度100%溢出

發表留言 人氣: 1109°c

TextArea、Text、Input、Field的輸入框,加上寬 width 100% 右邊會溢出(突出/破界)的可能,造成文字框的寬度超出100百分比。就算模板的#wrapper或是body加入padding或margin標籤,設定內外邊框的左右兩邊間隔空間,也是沒有用的。請看下邊的圖片

這個很早前HTML留下的詬病,以前如果一定要設定寬100,就需要編寫大量的代碼去構建。不過現在有了CSS3的出現,而且現在大部份的瀏覽器都跟上了,這個就來得簡單多了。

textarea {
padding: 0;
width: 100%;
box-sizing: border-box;
height: 300px;
border: 1px solid #E1E100;
background: #F5FFFA;
overflow: auto;
}

大家應該發現了以上的CSS代碼加上: box-sizing : border-box 在textarea 標籤,其他Text、Input、Field標籤也適合。

這是CSS3的新標籤屬性,只要用戶使用的瀏覽器遵從W3C標準,一律支持。

但如果你的網站瀏覽者多是使用IE6或IE7,這就需要考慮一下了。

已通過測試的瀏覽器: IE11、Edge、Firefox、Chrome、Safari、Opera

預覽效果Demo▼

標籤: | 短網址