<!doctype html> width render issue input element_问答_开发者

<!doctype html> width render issue input element

开发者 https://www.devze.com 2023-02-23 13:19 出处：网络

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.

相关专题：css

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 i开发者_Go百科s 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.