文本輸入元素的邊框超出了包含表格

使用以下HTML，輸入元素的寬度超出了表格邊框的邊緣。讓輸入元素佔據整個單元格內容的正確方法是什麼，但在左邊顯示的右邊緣仍具有相同的邊距？文本輸入元素的邊框超出了包含表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
<table style="border: 1px solid #000000;" width="100%"> 
<tr> 
<td><input style="width:100%"/></td> 
</tr> 
</table> 
</body> 
</html>

來源

2011-02-28 Matt Thalman

咦？它不應該那樣做。你能舉一個例子嗎（理想情況下是http://jsfiddle.net）？在哪些瀏覽器中會發生這種情況？ – 2011-02-28 17:40:32

原因是輸入寬度的計算沒有考慮輸入本身的默認邊界（也許是填充，IIRC）。嘗試設置padding: 0px; border: 0px並檢查它。

而且，看到 Problem with <input type='text' /> and <textarea> width 或How can I make a TextArea 100% width without overflowing when padding is present in CSS?的解決方案 - 此之前已經上來了。

來源

2011-02-28 17:47:35

文本輸入元素的邊框超出了包含表格

回答

相關問題