由于HTML头部声明的不同，造成input表单的宽度不一致，我希望可以透彻地理解为什么，跟大家一起探讨最佳的解决方案？
正逢公司网站改版上线，由于经验的不足没有考虑到兼容之前浏览器的版本。
现在遇到如下问题：
http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...
http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...
大家可以看这两个页面的不同，是因为申明头部造成的。
我希望能详细的了解为什么，如果在这里你能慷慨的给出意见，对我来说是莫大的帮助~！
写回答
-
IT从业题主两个页面的 声名导致了渲染模式的不同。进而导致浏览器加载的用户代理样式表(user agent stylesheet)不同。
拿 Chrome 作为例子，users_login_01.html 的声名为 ，这会触发 Chrome 采用 Standard 模式进行渲染。对应的 标签的 box-sizeing 为 content-box。而 users_login_02.html 错误的声名了不标准的 ，Chrome 则会使用 Quirks 模式进行渲染，对应的 box-sizeing 为 border-box。如果希望了解细节，可以查看下面的代码:
1.Webkit 标准模式下的用户代理样式表: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
2.Webkit 混杂模式下的用户代理样式表: http://trac.webkit.org/browser/trunk/Source/WebCore/css/quirks.css其实两个页面的区别就在 这里
2019-07-17 19:41:07赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
