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

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

liamnomercy

561913

发布于
2015-05-13

正逢公司网站改版上线，由于经验的不足没有考虑到兼容之前浏览器的版本。

现在遇到如下问题：

http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...

大家可以看这两个页面的不同，是因为申明头部造成的。

我希望能详细的了解为什么，如果在这里你能慷慨的给出意见，对我来说是莫大的帮助~！

html

html5

阅读 4.1k

2 个回答

得票最新

vvtommy

3k2412

发布于
2015-05-13

✓ 已被采纳

题主两个页面的 <!DOCTYPE> 声名导致了渲染模式的不同。进而导致浏览器加载的用户代理样式表(user agent stylesheet)不同。
拿 Chrome 作为例子，users_login_01.html 的声名为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ，这会触发 Chrome 采用 Standard 模式进行渲染。对应的 <input> 标签的 box-sizeing 为 content-box。而 users_login_02.html 错误的声名了不标准的 <!DOCTYPE> ，Chrome 则会使用 Quirks 模式进行渲染，对应的 box-sizeing 为 border-box。

如果希望了解细节，可以查看下面的代码: