當包含<！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佈局會改變？

回答

相關問題