Due to different HTML header declarations, the width of input forms is inconsistent. I hope I can thoroughly understand why and discuss the best solution with you.

  html5, question

Just when the company Website Revision went online, due to lack of experience, it did not consider compatibility with previous browser versions.

The following problems have been encountered:

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

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

You can see that the difference between the two pages is caused by the declaration of the head.

I hope to know in detail why, if you can give your opinion generously here, it will be of great help to me ~!

The title of the two pages<! DOCTYPE>Fame leads to different rendering modes. This leads to different user agent stylesheet loaded by the browser.
Take Chrome as an example.users_login_01.htmlThe fame of is<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >This will trigger Chrome to render in Standard mode. Corresponding<input>Taggedbox-sizeingForcontent-box. Andusers_login_02.htmlNot standard in reputation.<! DOCTYPE>Chrome will render in Quirks modebox-sizeingForborder-box.

If you want to know the details, you can look at the following code:

  1. User Agent Stylesheet in Webkit Standard Mode:http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  2. User Agent Stylesheet under Webkit promiscuous mode:http://trac.webkit.org/browser/trunk/Source/WebCore/css/quirks.css

In fact, the difference between the two pages isHere