Why does html layout change when <!DOCTYPE html> is included?
Question
Without <!DOCTYPE html> the following html:
<style>
input { width: 400px; }
span { width: 160px; display: inline-block; }
div { width: 560px; }
</style>
<div>
<span>Slug</span><input type=text placeholder="enter-article-slug-here">
</div>
Renders like this in Chrome and FF:
But when the line <!DOCTYPE html> is included, the html renders like this:
Why is this?
1 answers
solution1
4 ACCPTED 2013-11-21 22:16:25
When you declare <!DOCTYPE html> , Chrome and Firefox will change input from box-sizing: border-box to box-sizing: content-box . Because the input text box has a padding of 1px and a border of 1px , this will increase the width by 4px total, and in your example, that is enough to wrap it to the next line.
The user-agent stylesheet is set this way because without a <!DOCTYPE> declared, the browser is rendering in Quirks mode, which has a different default stylesheet than the normal Strict mode which is present when a <!DOCTYPE> is declared.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.