渲染输入文本元素时遇到问题.如果我添加<!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>
有人知道是什么原因引起的,但更重要的是如何解决它？
当您没有该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;
}
或者,您可以明确设置padding和您border-width自己,以确保值的总和padding,border-width并width加起来300px.