Question

当我使用<!DOCTYPE html>时，我的文本字段较大（大约257像素而不是250像素）。有谁知道为什么会这样吗？我在网上找不到任何东西。

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>

    <body>
        <form>
            <input type='text' style="width:250px">
            <div style='width:250px;background-color:#00FF00'>&nbsp;</div>
        </form>
    </body>
</html>

谢谢！

Answer 1

尝试这个

.inp {
  box-sizing:border-box;
}

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px" class= "inp">
<div style='width:250px;background-color:#00FF00'>&nbsp;</div>

</form>
</body>
</html>

Answer 2

这是浏览器的默认样式，来自chrome dev：

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}

因此边框占2 * 2像素，填充占2 * 1像素，等于256像素

HTML 5 Doctype文本字段大于给定宽度

2 个答案: