html5 - 由于HTML头部声明的不同，造成input表单的宽度不一致，我希望可以透彻地理解为什么，跟大家一起探讨最佳的解决方案？

Question

正逢公司网站改版上线，由于经验的不足没有考虑到兼容之前浏览器的版本。 现在遇到如下问题： http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0... http://example.liambaba.com/liambab...

PHPz · Answer

題主兩個頁面的聲名導致了渲染模式的差異。進而導致瀏覽器載入的使用者代理樣式表(user agent stylesheet)不同。
以 Chrome 舉例，users_login_01.html 的聲名為，這會觸發 Chrome 採用 Standard 模式進行渲染。對應的標籤的 box-sizeing 為 content-box。而 users_login_02.html 錯誤的聲名了不標準的，Chrome 則會使用 Quirks 模式進行渲染，對應的 box-sizeing 為 border-box。

如果希望了解細節，可以查看下面的程式碼:

Webkit 標準模式下的使用者代理樣式表: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Webkit 混雜模式下的使用者代理樣式表: http://trac.webkit.org/browser/trunk/Source/WebCore/css/quirks.css

其實兩個頁面的差別就在這裡

天蓬老师 · Answer

樓主的第2個方案寫錯了應該是,而不是，查了一下資料，沒看到有這樣的簡寫，所以是因為dtd寫錯了引發混雜模式，而造成盒模型錯誤。

html5 - 由于HTML头部声明的不同，造成input表单的宽度不一致，我希望可以透彻地理解为什么，跟大家一起探讨最佳的解决方案？

全部回覆(2)我來回復