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

Question

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

PHPz · Answer

The reputation of the two main pages leads to different rendering modes. This results in a different user agent stylesheet loaded by the browser.
Taking Chrome as an example, the declaration of users_login_01.html is , which will trigger Chrome to render in Standard mode. The corresponding tag is box-sizeing. And content-box mistakenly declares non-standard users_login_02.html. Chrome will use Quirks mode for rendering, and the corresponding is box-sizeing. border-box

If you want to know the details, you can check the code below:

Actually, the difference between the two pages is here

天蓬老师 · Answer

The second solution of the poster was written incorrectly and should be instead of . I checked the information and did not see such an abbreviation, so it was caused by the wrong writing of dtd. Mixed mode, resulting in box model errors.