<!doctype html> 宽度渲染问题输入元素

【问题标题】：<!doctype html> width render issue input element<!doctype html> 宽度渲染问题输入元素
【发布时间】：2011-04-12 04:31:39
【问题描述】：

渲染输入文本元素时出现问题。如果我将<!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>

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

【问题讨论】：

那是什么文档类型？我不认为这是有效的。使用有效的。
@Headshota 那是html5 doctype
@Headshota：它是标准的 html5 文档类型

标签： html css

【解决方案1】：

当您没有该文档类型时，您的页面将在 Quirks Mode 中呈现。

在 Quirks 模式下，input 中的 border 和 padding 计入 300px 宽度内。

当您添加 the doctype 时，您的页面将以标准模式呈现，并且 border 和 padding 不再是 300px 的一部分 - 这就是“额外”4px 的来源。

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

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

input
{
    width: 300px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

或者，您可以自己显式设置padding 和border-width，以确保padding、border-width 和width 的值之和等于300px。

【讨论】：

感谢您的快速回复和解释