title: Why firefox display boxes different from Safari, IE, Chrome etc.?
body: <p>I've been tackling this tiny but very annoying cross-browser CSS problem: For some reason Firefox displays boxes/input fields with different measurements from other browsers. It seems like firefox is somehow ignoring box-sizing: border-box and still measures the boxes by its own measures. What is the cause here? Is there any bubblegum solution to this? I'm ready for it.</p>
  
  <p>What I'm doing here is dynamic jquery input field adder. The fields next to plus button are 'fakefields' which for some reason displays different in firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/dg8iF.jpg" alt="enter image description here"></p>
  
  <p>Doctype: XHTML 1.0 Strict</p>
  
  <p>CSS:</p>
  
  <pre><code>.fakeinpfield {
          border: 1px solid #C2C2C2 !important;
          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          border-radius: 2px; 
  }
  input#fakeinpfield3 {
          width: 320px !important;
          margin-right: 6px;
          margin-top: 3px;
          -moz-box-sizing: border-box; 
          -webkit-box-sizing: border-box; 
          box-sizing: border-box;
          height: 26px;
          padding: 0;
  
  }
  input#fakeinpfield4 {
          width: 135px !important;
          margin-right: 6px;
          margin-top: 3px;
          -moz-box-sizing: border-box; 
          -webkit-box-sizing: border-box; 
          box-sizing: border-box;
          height: 26px;
          padding: 0;
  }
  input#fakeinpfield5 {
          width: 135px !important;
          margin-right: 6px;
          margin-top: 3px;
          -moz-box-sizing: border-box; 
          -webkit-box-sizing: border-box; 
          box-sizing: border-box;
          height: 26px;
          padding: 0;
  }
  </code></pre>