如何修复表单，输入默认溢出行为

Question

当我将 text 类型的 input 放入 form 中时，input 溢出 form 4 pixels；这似乎只发生在 width 是 100%.

时

id est:

<html>
  <head>
    <title></title>
    <style>
      input { width: 100% }
    </style>
  </head>
  <body>
    <form><input type="text" /></form>
  </body>
</html>

为什么会出现这种情况？

http://jsfiddle.net/3y8bmqfw/

Answer 1

因为大多数浏览器会在 <input type="text"> 元素周围创建一个 2px 的边框。 2px 左 + 2px 右 = 4px。由于width不算border，如果width = 100%容器宽度，border的4px会溢出容器

纠正此问题的一种可能方法是将 box-sizing: border-box 应用于元素，让浏览器以不同方式计算框的大小（包括填充和边框）。

如何修复表单，输入默认溢出行为

How to fix form, input default overflow behaviour

html

css

xhtml