当包含<！DOCTYPE html>时，为什么html布局会改变？

没有<!DOCTYPE html>下面的HTML：当包含<！DOCTYPE html>时，为什么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>

呈现这样在Chrome和FF：

without doctype

但当包括行<!DOCTYPE html>，在HTML呈现这样的：

with doctype

为什么这是？

来源

2013-11-21 HorseloverFat

可能重复[什么是怪癖模式？]（http://stackoverflow.com/questions/1695787/what-is-quirks-mode） –

当您声明<!DOCTYPE html>时，Chrome和Firefox会将input从box-sizing: border-box更改为box-sizing: content-box。由于input文本框的padding的1px和border的1px，这会使总数增加width4px，在您的示例中，这足以将其包装到下一行。

用户代理样式表被设置这种方式，因为没有<!DOCTYPE>声明时，浏览器在怪癖模式，其具有比正常严格模式时<!DOCTYPE>宣告其存在不同的默认的样式表的渲染。

来源

2013-11-21 22:16:25 MattDiamant

当包含<！DOCTYPE html>时，为什么html布局会改变？

回答

相关问题