title: 1 pixel difference between Firefox and Chrome
body: <p>I have written a simple html. </p>
  
  <pre><code>&lt;div class="button"&gt;button&lt;div&gt;
  </code></pre>
  
  <p>and this css of this line is</p>
  
  <pre><code>.button {
      background-color: #F1631F;
      position: absolute;
      bottom: 10px;
      left: 20px;
  }
  </code></pre>
  
  <p>But there is one pixel difference between firefox and chrome.</p>
  
  <p><img src="https://i.stack.imgur.com/EabV9.png" alt="chrome"> <img src="https://i.stack.imgur.com/glfVU.png" alt="firefox"></p>
  
  <p>left is chrome, right one is firefox. My button is the orange one.</p>
  
  <p>Is there any good solution to solve this? </p>
  
  <p>BTW, I have add </p>
  
  <pre><code>* {  margin: 0; padding: 0; border: 0;}
  </code></pre>
  
  <p>at the beginnning of my css file.</p>
  
  <p>Parent html and css:</p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;div class="button"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .item{
      margin-top: 25px;
      text-align: right;
  }
  </code></pre>