css - <!doctype html> width render issue input element -


i have problem when rendering input text elements. if add <!doctype html> file input element gets stretched, input submit button not. have tested in several different browsers , consistent, me :(.

in example text element rendered width of 304 pixels. when remove first line render @ 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 know causing it, more importantly how can fixed?

when don't have doctype, page rendering in quirks mode.

in quirks mode, border , padding of input counted inside 300px width.

when add the doctype, page rendering in standards mode, , border , padding no longer part of 300px - that's "extra" 4px coming from.

see here: http://www.quirksmode.org/css/box.html

the easiest way "fix" modern browsers use box-sizing: border-box:

input {     width: 300px;      -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     box-sizing: border-box; } 

or, can explicitly set padding , border-width yourself, make sure sum of values of padding, border-width , width add 300px.


Comments

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -