Question

当我将input类型text放入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。由于宽度不计算边框，如果宽度=容器宽度的100％，则4px的边框会溢出容器。

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

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

1 个答案: