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

liamnomercy
  • 56
回复
阅读 3.5k
2 个回答

题主两个页面的 <!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-sizeingcontent-box。而 users_login_02.html 错误的声名了不标准的 <!DOCTYPE> ,Chrome 则会使用 Quirks 模式进行渲染,对应的 box-sizeingborder-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

其实两个页面的区别就在 这里

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

宣传栏