<!doctype html> width render issue输入元素

Question

<!doctype html> width render issue输入元素

渲染输入文本元素时遇到问题.如果我添加<!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>

Run Code Online (Sandbox Code Playgroud)

有人知道是什么原因引起的,但更重要的是如何解决它？

Answer 1

thi*_*dot 9

当您没有该doctype时,您的页面将以Quirks模式呈现.

在怪癖模式中,border和padding的input计数内的300px宽度.

当您添加文档类型,你的网页显示在标准模式,以及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;
}

Run Code Online (Sandbox Code Playgroud)

或者,您可以明确设置padding和您border-width自己,以确保值的总和padding,border-width并width加起来300px.

归档时间：	14 年，5 月前
查看次数：	2035 次
最近记录：	14 年，5 月前