title: What's happening with text-inputs in mobile browser
body: <p>I'm creating small web-site, that contains forms with some text-inputs. I'm using this meta tag:</p>
  <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
  </code></pre>
  <p>to display some elements correctly on mobile device. I'm checking it using Android Chrome.</p>
  <p>It causes problem: my border of form(simple div) and borders of text-inputs become very thick, but it is set 1px. So, this is form without meta tag:</p>
  <p><img src="https://i.stack.imgur.com/1VtKf.jpg" alt="without meta" /></p>
  <p>And this is form with meta tag:</p>
  <p><img src="https://i.stack.imgur.com/0xACt.jpg" alt="with meta" /></p>
  <p>So, the first question is:</p>
  <blockquote>
  <p>How to prevent 1px increasing with device-width meta-tag?</p>
  </blockquote>
  <p>Also, as we can see, top and bottom padding are different for text-inputs and even for button(which is div, but not submit-input!). It is more visible on second image. I've understood, that it is caused by Android typing-underlining(at least for text-inputs). When you start typing word it is underlined for auto-correction or smth like that.</p>
  <p>In first situation underline-width is also one pixel, so difference isn't so bad(but I want to fix it too). In second it is also thick, so there is big difference:</p>
  <p><img src="https://i.stack.imgur.com/dbNCd.jpg" alt="thick underlining" /></p>
  <p>So, logical question is:</p>
  <blockquote>
  <p>How to prevent underlining-width increasing with device-width meta-tag?</p>
  </blockquote>
  <p>And of course, I don't understand.</p>
  <blockquote>
  <p>WHY does this increasing mechanism affects simple div's??? There is no typing inside</p>
  </blockquote>
  <p>This is div code:</p>
  <pre><code>&lt;div id=&quot;form-submit&quot;&gt;ЗАБРОНИРОВАТЬ&lt;/div&gt;
  </code></pre>
  <hr />
  <pre><code>    div#form-submit {
      display: table;
      margin-bottom: 1em;
      border: 1px solid black;
      background-color: white;
      outline: 0px;
      font-size: 0.24em;
      font-family: inherit;
      padding-left: 0.3em;
      padding-right: 0.3em;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      border-radius: 0.7em;
      margin: 0 auto;
      margin-bottom: 1.6em;
      cursor: pointer;
  }
  </code></pre>
  <p>Finally, you can see difference between the second and the third image. When I started typing, button text moved to center a little bit...</p>
  <p>It will be great, if somebody give explanation of any issue...</p>