<！doctype html>宽度渲染问题输入元素 [英] <!doctype html> width render issue input element
问题描述
在呈现输入文本元素时遇到问题。如果我添加<！doctype html> 到我的文件输入元素拉伸，我的输入提交按钮不。
我在几个不同的浏览器测试，它是一致的，所以它可能是我：（。
在这个例子中，
例如：
<！doctype html>
< html>
< STYLE type =text / css>
* {margin：0px; padding： 0px;}
input
{
width：300px;
}
< / STYLE>
< body>
< input />< br />
< input type =submit>
< / body>
< / html>
h2_lin>解决方案当您没有该doctype时，您的网页会以怪异模式 a>。
在Quirks模式下， border 和 padding 中 中输入输入 b
$ b 添加 doctype 时，您的网页以标准模式呈现， code> 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 。
I have a problem when rendering my input text elements. If i add the <!doctype html> to my file the input element gets stretched, my input submit button does not.
I have tested in several different browsers and it is consistent, so it is probably me :(.
In the example my text element is rendered with a width of 304 pixels. When I remove the first line it will render at 300 pixels.
example:
<!doctype html>
<html>
<STYLE type="text/css">
*{ margin: 0px; padding: 0px; }
input
{
width: 300px;
}
</STYLE>
<body>
<input/><br/>
<input type="submit">
</body>
</html>
Does anybody know what is causing it, but more importantly how it can be fixed?
解决方案 When you don't have that doctype, your page is rendering in Quirks Mode.
In Quirks Mode, the border and padding of the input are counted inside the 300px width.
When you add the doctype, your page is rendering in Standards Mode, and the border and padding are no longer part of the 300px - that's where the "extra" 4px is coming from.
See here: http://www.quirksmode.org/css/box.html
The easiest way to "fix" this for modern browsers is to use box-sizing: border-box:
input
{
width: 300px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Or, you can explicitly set the padding and border-width yourself, to make sure the sum of the values of padding, border-width and width add up to 300px.
这篇关于<！doctype html>宽度渲染问题输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
