爲什麼我的textarea比頁面更寬？

我寫了一個XHTML 1.0過渡頁（使用W3C的驗證確認），包含table與textarea它：爲什麼我的textarea比頁面更寬？

<table> 
    <tr> 
     <td> 
      <textarea rows="" cols=""> 
      </textarea> 
     </td> 
    </tr> 
</table>

而且，在外部樣式表，我寫的代碼爲table和textarea：

table { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
textarea { 
    width: 100%; 
    height: 200px; 
    padding: 20px; 
    margin: 0px; 
}

但是，出於某種原因，該textarea的填充影響其寬度，並使textarea超過頁面的寬度，造成不必要的溢出。

是否有某種方法可以將填充應用於textarea而不影響其寬度？

來源

2013-08-21 Logical Angel

「由於某些原因，textarea的填充會影響其寬度」 - yup。這就是CSS的工作原理。 –

出於某種原因，textarea的填充影響其寬度

是啊，這就是CSS是如何工作的。 width指的是元素內容區域的寬度。填充，邊框和邊距默認分開處理。

參見例如http://quirksmode.org/css/user-interface/boxsizing.html

是否有某種方法可以將填充應用於textarea而不影響TextArea的寬度？

的CSS規則box-sizing:border-box你想要做什麼：

textarea { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    padding: 20px; 
}

它告訴瀏覽器來治療width爲是指元素的含量，填充和邊境地區的總寬度。因此，<textarea>的內容區域的寬度將設置爲父元素的100％，減去水平填充的40個像素。

但是，請注意，IE 7或更早版本中不支持border-box。

來源

2013-08-21 15:41:11

現在完美地工作，非常感謝。我不知道這個財產或其影響。我甚至可以給表填充而不會溢出內容。 –

@LogicalAngel：是的，這非常非常方便。（在怪癖模式下，默認情況下IE 7和更早的處理寬度在'box-sizing：border-box;'方式默認情況下。）最受歡迎的是upvotes（點擊左上角「0」上方的箭頭我的答案）和接受（點擊打勾）也非常感謝。歡迎來到堆棧溢出！ –

爲什麼我的textarea比頁面更寬？

回答

相關問題