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
Post a Comment