宽度为100％的HTMLinput文本框溢出表格单元格
有谁知道为什么宽度为100％的input元素超过表的单元格边框。
在下面的简单例子中，input框越过表格的单元格边界，结果是可怕的。 这已经过testing，它以相同的方式发生在Firefox，IE7和Safari上。
这对你有意义吗？ 我错过了什么，你知道一个可能的解决scheme吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional --> <title>Test input text in table</title> <style type="text/css"> table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;} table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;} input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */ </style> </head><body> <table cellpadding="0" cellspacing="0"> <tr> <td><p>column one hello babe babe babe</p></td> <td><p>column two hello babe more</p></td> <td><p>column three hello babe more and more</p></td> </tr> <tr> <td><input type="text" value="test"></td> <td><input type="text" value="test"></td> <td><input type="text" value="test"></td> </tr> </table> </body></html> 你可以使用CSS3 box-sizing属性来包含外部填充和边框：
input[type="text"] { width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; }
宽度值不考虑边框或填充：
http://www.htmldog.com/reference/cssproperties/width/
你得到2px填充每边，再加上1px边框在每边。
100％+ 2 *（2px + 1px）= 100％+ 6px，这比父td拥有的100％子内容多。
您可以select：
- 无论是设置
box-sizing: border-box;根据@ pricco的答案 ; - 或使用0边距和填充（避免额外的大小）。
与width:95%;事情有关的问题width:95%; 是他们看起来不是很宽的灵活布局（因为5％可以像30像素）。
以下解决scheme适用于我（在Firefox，IE 9，Safari中testing）：
<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: red; padding: 3px;"> <div style="margin-right: 3px;"> <div style="padding-right: 3px;"> <input type="text" style="width:100%;"> </div> </div> </td> <td style="background-color: purple; padding: 3px;"> <div style="margin-right: 3px;"> <div style="padding-right: 3px;"> <input type="text" style="width:100%;"> </div> </div> </td> <td style="background-color: green; padding: 3px;"> <div style="margin-right: 3px;"> <div style="padding-right: 3px;"> <input type="text" style="width:100%;"> </div> </div> </td> </tr> </table>
（添加颜色使其更容易注意到正确的填充）
诀窍是包装两个div的input，外部有一个3px的余量（这使得它比td小3px），内部有一个3px的填充。 这使得input6px比td小，这就是你想要开始的。
我不知道这个机制，但它的作品。
在这个简单的例子中，它也适用于右边距为6的单个div。但是，在我的Web应用程序中，只有上述解决scheme有效。
<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: red; padding: 3px;"> <div style="margin-right: 6px;"> <input type="text" style="width:100%;"> </div> </td> <td style="background-color: purple; padding: 3px;"> <div style="margin-right: 6px;"> <input type="text" style="width:100%;"> </div> </td> <td style="background-color: green; padding: 3px;"> <div style="margin-right: 6px;"> <input type="text" style="width:100%;"> </div> </td> </tr> </table>
这个问题之前已经解释过了，所以我只会重申一下：宽度不考虑边界和填充。 一个可能的答案，这个没有讨论，但我发现帮了我一堆是包装你的投入。 这里是代码，我会解释一下如何帮助：
<table> <tr> <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td> </tr> </table>
包裹INPUT的DIV没有填充，也没有边框。 这是解决scheme。 DIV将扩大到其容器的大小，但也将尊重边界和填充。 现在，INPUT将没有问题扩大到其容器的大小，因为它是无边框和无边框的。 还要注意DIV的溢出设置为隐藏状态。 看起来，默认情况下，项目可能会落在他们的容器之外，默认溢出可见。 这只是确保input保持在其容器内，不会试图通过。
我已经在Chrome和Fire Fox中testing过了。 两者似乎很好地尊重这个解决scheme。
更新 ：因为我刚刚得到一个随机downvote，我想说，一个更好的方法来处理溢出是与pricco描述的CSS3 box-sizing属性：
.myinput { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
这似乎是由主要的浏览器很好的支持，并不像溢出技巧“哈克”。 然而，使用这种方法在当前浏览器上存在一些小问题（请参阅http://caniuse.com/#search=box-sizing已知问题）。;
我知道这个问题已经3年了，但现在的浏览器仍然存在这个问题，人们还在这里。 现在的解决scheme是calc（） ：
input { width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */ width: -webkit-calc(100% - 12px); /*For safari 6.0*/ }
它受到大多数现代浏览器的支持。
问题是由于input元素框模型。 我刚刚find一个很好的解决scheme，当试图保持我的input为100％的移动设备。
用另一个元素（例如div）包裹input。 然后将你想要的样式应用到包装div。 例如：
<div class="input-wrapper"> <input type="text" /> </div> .input-wrapper { border-raius:5px; padding:10px; } .input-wrapper input[type=text] { width:100%; font-size:16px; }
给input包装圆angular填充等，无论你想为您的input，然后给予input宽度100％。 你有你的input填充很好的边框等，但没有恼人的溢出！
我从@ hallodom的答案开始解决了这个问题。 我所有的input都包含在里面，所以我所要做的就是设置li overflow：隐藏它来消除多余的input溢出。
.ie7 form li { width:100%; overflow:hidden; } .ie7 input { width:100%; }
而不是这个利润率的斗争
input{ width:100%; background:transparent !important; }
这样的单元格边框是可见的，你可以控制行背景颜色
从DOCTYPE声明中取出“http://www.w3.org/TR/html4/loose.dtd”，它解决了你的问题。;
干杯! 🙂
用一些Javascript你可以得到包含TD的确切宽度，然后直接将其分配给input元素。
以下是原始的JavaScript，但jQuery会使它更清洁…
var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { var el = inputs[i]; if (el.style.width == '100%') { var pEl = el.parentNode; // Assumes the parent node is the TD... el.style.width = pEl.offsetWidth; } }
这个解决scheme的问题是：
1）如果你的input包含在另一个元素（如SPAN）中，那么你将需要循环查找TD，因为像SPAN这样的元素将包装input并显示其大小，而不是被限制在TD的大小。
2）如果在不同的级别添加了填充或边距，则可能必须明确地从[pEl.offsetWidth]中减去该值。 取决于您可以计算的HTML结构。
3）如果表格的列大小是dynamic变化的，那么改变一个元素的大小将导致表格在某些浏览器中重新排列，当你依次“修复”input大小时，你可能会得到一个阶梯式的效果。 解决方法是以百分比或像素为列指定特定的宽度，或者收集新的宽度并在之后设置它们。 看到下面的代码..
var inputs = document.getElementsByTagName('input'); var newSizes = []; for (var i = 0; i < inputs.length; i++) { var el = inputs[i]; if (el.style.width == '100%') { var pEl = el.parentNode; // Assumes the parent node is the TD... newSizes.push( { el: el, width: pEl.offsetWidth }); } } // Set the sizes AFTER to avoid stepping... for (var i = 0; i < newSizes.length; i++) { newSizes[i].el.style.width = newSizes[i].width; }
我通过应用box-sizing:border-box解决了这个问题box-sizing:border-box ; 到表格单元格本身，除了与input和包装器一样。
我解决了这个问题
tr td input[type=text] { width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; background:transparent !important; border: 0px; }
我通常将我的input宽度设置为99％来解决这个问题：
input { width: 99%; }
您也可以删除默认的样式，但是这会使它不太明显，它是一个文本框。 不过，我仍然会显示代码：
input { width: 100%; border-width: 0; margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
广告@米
问题在于input元素的border-width 。 不久，尝试将input元素的margin-left设置为-2px 。
table input { margin-left: -2px; }
我有完全相同的问题，并通过这种方式解决：
input[type="text"] {width: 95%;}
