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

Question

正逢公司网站改版上线，由于经验的不足没有考虑到兼容之前浏览器的版本。
现在遇到如下问题：
http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...
http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...
大家可以看这两个页面的不同，是因为申明头部造成的。
我希望能详细的了解为什么，如果在这里你能慷慨的给出意见，对我来说是莫大的帮助~！

Answer 1

题主两个页面的声名导致了渲染模式的不同。进而导致浏览器加载的用户代理样式表(useragentstylesheet)不同。拿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.cssWebkit混杂模式下的用户代理样式表:http://trac.webkit.org/browser/trunk/Source/WebCore/css/quirks.css其实两个页面的区别就在这里

Answer 2

楼主的第2个方案写错了应该是,而不是，查了下资料，没看到有这样的简写，所以是因为dtd写错了引发混杂模式，而造成盒模型错误。