正逢公司网站改版上线,由于经验的不足没有考虑到兼容之前浏览器的版本。
现在遇到如下问题:
http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...
http://example.liambaba.com/liambaba-laboratory/temp-dir/users_login_0...
大家可以看这两个页面的不同,是因为申明头部造成的。
我希望能详细的了解为什么,如果在这里你能慷慨的给出意见,对我来说是莫大的帮助~!
PHPz2017-04-17 11:33:32
题主两个页面的 <!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
。
如果希望了解细节,可以查看下面的代码:
其实两个页面的区别就在 这里
天蓬老师2017-04-17 11:33:32
楼主的第2个方案写错了 应该是<!DOCTYPE HTML>,而不是<!DOCTYPE>,查了下资料,没看到有这样的简写,所以是因为dtd写错了引发混杂模式,而造成盒模型错误。