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

有谁知道为什么宽度为100%的输入元素超过了表格的单元格边框.

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

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

    
    
    
   
       



   

      
column one hello babe babe babe
      
column two hello babe more
      
column three hello babe more and more
   
   

      

      

      

   

pricco.. 210

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

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

有同样的问题,发现了这个宝石 (2认同)

---

ANeves.. 24

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

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

每侧有2px的填充,每边加1px的边框.
100%+ 2*(2px + 1px)= 100%+ 6px,这超过了父td具有的100%子内容.

您可以选择:

无论是设定box-sizing: border-box;为每@ pricco的答案 ;

或使用0边距和填充(避免额外的大小).

---

小智.. 14

类似的问题width:95%;是它们在宽柔性布局中看起来不正确(因为5%可能就像30像素).

以下解决方案适用于我(在Firefox,IE 9,Safari中测试):

(添加颜色以便更容易注意到正确的填充)

诀窍是用两个div包装输入,外部有3px的边距(这使得它比td小3px),内部有3px填充.这使输入6px小于td,这是你想要的开始.

我不确定这个的机制,但它确实有效.

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

---

David Peters.. 8

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

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

我已经在Chrome和Fire Fox中对此进行了测试.两者似乎都很尊重这个解决方案.

更新:由于我只是一个随机的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已知问题).

1> pricco..：

---

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

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

---

有同样的问题,发现了这个宝石

2> ANeves..：

---

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

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

每侧有2px的填充,每边加1px的边框.
100%+ 2*(2px + 1px)= 100%+ 6px,这超过了父td具有的100%子内容.

您可以选择:

无论是设定box-sizing: border-box;为每@ pricco的答案 ;

或使用0边距和填充(避免额外的大小).

3> 小智..：

---

类似的问题width:95%;是它们在宽柔性布局中看起来不正确(因为5%可能就像30像素).

以下解决方案适用于我(在Firefox,IE 9,Safari中测试):

(添加颜色以便更容易注意到正确的填充)

诀窍是用两个div包装输入,外部有3px的边距(这使得它比td小3px),内部有3px填充.这使输入6px小于td,这是你想要的开始.

我不确定这个的机制,但它确实有效.

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

4> David Peters..：

---

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

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

我已经在Chrome和Fire Fox中对此进行了测试.两者似乎都很尊重这个解决方案.

更新:由于我只是一个随机的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已知问题).

---

一个简短的说明:使用`overflow:hidden;'内容仍然以完全相同的方式"跳过"到框的外部,但它被截断而不是被显示 - 因此它不会与其他内容重叠.