Question

有谁知道为什么宽度为100％的输入元素会超过表格的单元格边框。

在下面的简单示例输入框中查看表格的单元格边框，结果很可怕。这已经过测试，它以相同的方式发生在：Firefox，IE7和Safari。

对你有意义吗？我错过了什么，你知道可能的解决方案吗？

<!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>

Answer 1

您可以使用CSS3 box-sizing属性来包含外部填充和边框：

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

Answer 2

宽度值不考虑边框或填充：

http://www.htmldog.com/reference/cssproperties/width/

每侧有2px的填充，每边加1px的边框 100％+ 2 *（2px + 1px）= 100％+ 6px，超过父td的100％子内容。

您可以选择：

根据@pricco's answer设置box-sizing: border-box;;
或使用0边距和填充（避免额外的大小）。

Answer 3

像width:95%;这样的问题是它们在宽广的灵活布局中看起来不正确（因为5％可能就像是30像素）。

以下解决方案适用于我（在Firefox，IE 9，Safari中测试）：

<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包装输入，外部有3px的边距（使得它比td小3px），内部有3px填充。这使输入6px小于td，这是你想要的开始。

我不确定这个的机制，但它有效。

在这个简单的例子中，它只适用于带有右边距6的单个div。但是，对于我的Web应用程序，只有上述解决方案有效。

<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>

Answer 4

此问题已在前面解释过，所以我只重申：宽度不会考虑边框和填充。一个可能的答案没有讨论，但我发现帮助我一堆是你的输入。这是代码，我将在一秒钟内解释这有何帮助：

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

包裹INPUT的DIV没有填充，也没有边框。这是解决方案。 DIV将扩展到其容器的大小，但它也将尊重边框和填充。现在，INPUT没有问题扩展到其容器的大小，因为它是无边框和无垫。另请注意，DIV的溢出设置为隐藏。似乎默认情况下，项目可以在默认溢出的可见范围内落在其容器之外。这只是确保输入保持在其容器内并且不会试图戳穿。

我在Chrome和Fire Fox中测试了这个。两者似乎都很好地尊重这个解决方案。

UPDATE ：由于我刚收到一个随机的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;
}

主流浏览器似乎很好地支持了它，并不像溢出技巧那样“hacky”。但是，使用此方法的当前浏览器存在一些小问题（请参阅http://caniuse.com/#search=box-sizing已知问题）。

Answer 5

我知道这个问题已经存在了3年，但问题仍然存在于当前的浏览器中，人们仍然会来这里。现在的解决方案是calc()：

input {
    width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
    width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}

大多数现代浏览器都支持它。

Answer 6

问题是由输入元素框模型引起的。我最近在尝试将移动设备的输入保持在100％时找到了一个很好的解决方案。

用另一个元素包裹您的输入，例如div。然后将您想要输入的样式应用于包装器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-wrapper圆角填充等，无论你想要什么输入，然后给出100％的输入宽度。你的输入很好地填充边框等，但没有恼人的溢出！

Answer 7

我从@ hallodom的答案开始修复了这个问题。我所有的输入都包含在li中，所以我所要做的就是设置li overflow：隐藏它以消除多余的输入溢出。

.ie7 form li {
  width:100%;
  overflow:hidden;
}

.ie7 input {
  width:100%;
}

Answer 8

而不是这个保证金斗争

input{
    width:100%;
    background:transparent !important;
}

这样单元格边框可见，您可以控制行背景颜色

Answer 9

从DOCTYPE声明中取出“http://www.w3.org/TR/html4/loose.dtd”，它可以解决您的问题。

干杯！：）

Answer 10

使用一些Javascript，您可以获得包含TD的确切宽度，然后将其直接分配给输入元素。

以下是原始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;
    }
}

此解决方案的问题是：

1）如果您的输入包含在另一个元素（如SPAN）中，那么您将需要循环并找到TD，因为像SPAN这样的元素将包装输入并显示其大小而不是限制为TD的大小

2）如果你在不同的级别添加了填充或边距，那么你可能必须从[pEl.offsetWidth]中明确地减去它。取决于您可以计算的HTML结构。

3）如果表列的大小是动态调整的，那么更改一个元素的大小将导致表在某些浏览器中重排，并且在顺序“修复”输入大小时可能会产生阶梯效应。解决方案是以百分比或像素为列指定特定宽度或收集新宽度并在之后设置它们。请参阅下面的代码..

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;
}

Answer 11

我通过应用box-sizing:border-box解决了这个问题;表单元格本身，除了对输入和包装器做同样的操作。

Answer 12

我使用此

解决了这个问题

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;
}

Answer 13

我通常将输入的宽度设置为99％以解决此问题：

input {
    width: 99%;
}

您也可以删除默认样式，但这样就不会明显它是一个文本框。但是，无论如何我都会展示代码：

input {
    width: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

广告@米

Answer 14

问题在于输入元素的border-width。不久，尝试将输入元素的margin-left设置为-2px。

table input {
  margin-left: -2px;
}

宽度为100％的HTML输入文本框溢出表格单元格

14 个答案: