title: Sub-Pixels calculated and rendered differently among browsers
body: <h1>The purpose:</h1>
  <p>I am working on a code similar to this to create a <strong>component where an input field has an embedded button</strong>:</p>
  <p><a href="http://codepen.io/anon/pen/pgwbWG?editors=110" rel="noreferrer">http://codepen.io/anon/pen/pgwbWG?editors=110</a></p>
  <p>As you can see, the <em>button</em> is positioned absolutely with <code>top</code> and <code>bottom</code> set to <code>0</code>, to achieve a 100% height element.</p>
  <p>Also to note is that the border of the <em>text-input</em> must stay visible and also wrap the <em>button</em>.
  To achieve this I added a <code>margin: 1px</code> to the <em>button</em> so that there is (should be) space to display the surrounding <em>text-input</em> red border (usually when the input field content is invalid).</p>
  <h1>The problem:</h1>
  <p>is that on Firefox it is (mostly) rendered correctly, while on Chrome (and apparently on the newest Safari) it will have a <strong>1px gap at the bottom of the <em>button</em></strong>.</p>
  <p>CSS seems ok but it appears to be a calculation/rounding problem in the rendering, where the bottom or the top margin of the button are not really 1px (can see it inspecting the element).
  And also the padding of the input seems to influence in that.</p>
  <p><strong>At different zoom-rates it will add or remove 1px of margin to the top or the bottom of the <em>button</em>, resulting in a 1px-gap or in a covered-border</strong>.</p>
  <p>As I set the <em>button</em> margin to <code>0px</code> then the bottom margin is fixed but I loose the 1px margin on the top, finishing to cover the red border of the <em>text-input</em>.</p>
  <h1>The examples:</h1>
  <p>Probably I am not clear or too verbose in explaining it, so here are some screenshots of the bug, from different zooms on Chrome (note the CSS is always the same):</p>
  <p><a href="https://i.stack.imgur.com/nLA7s.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nLA7s.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/BhT0Z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BhT0Z.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/dffdX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dffdX.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/vzqun.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vzqun.png" alt="enter image description here" /></a></p>
  <h1>The solution:</h1>
  <p>I was not able to find a <strong>cross-browser solution</strong>.
  How to deal with it and get a consistent component?
  (no Javascript please)</p>