Question

渲染输入文本元素时遇到问题。如果我将<!doctype html>添加到我的文件中，输入元素将被拉伸，我的输入提交按钮不会。我已经在几个不同的浏览器中进行了测试并且它是一致的，所以很可能是我:(。

在示例中，我的文本元素的宽度为304像素。当我删除第一行时，它将以300像素呈现。

示例：

<!doctype html>
<html>
 <STYLE type="text/css">
    *{ margin: 0px; padding: 0px; }
    input
    {
        width: 300px;
    }
 </STYLE>
<body>
    <input/><br/>
    <input type="submit">
</body>
</html>

有人知道造成它的原因，但更重要的是如何解决它？

Answer 1

如果您没有该文档类型，则您的网页会在Quirks Mode呈现。

在Quirks模式下，border的{{1}}和padding计算在里面 input宽度。

当您添加the doctype时，您的网页将以标准模式呈现，而300px和border不再是padding的一部分 - 那就是“额外的” “300px来自。

见这里：http://www.quirksmode.org/css/box.html

为现代浏览器“修复”此问题的最简单方法是使用box-sizing: border-box：

4px

或者，您可以自己明确设置input { width: 300px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }和padding，以确保添加border-width，padding和border-width的值的总和最高为width。

width render issue输入元素

1 个答案: