title: Fractional pixels are rounded differently in IE and Chrome
body: <p>Is there any way to control whether a browser rounds fractional pixels up or down? IE rounds down by default, and Chrome rounds up, as can be seen in the following example <a href="http://jsfiddle.net/q5BQs/3/" rel="nofollow">http://jsfiddle.net/q5BQs/3/</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="percentage"&gt;
      &lt;div class="first"&gt;50%=100px&lt;/div&gt;
      &lt;div class="second"&gt;50.5%=101px&lt;/div&gt;
      &lt;div class="third"&gt;51%=102px&lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div id="pixels"&gt;
      &lt;div class="first"&gt;50px&lt;/div&gt;
      &lt;div class="second"&gt;50.5px&lt;/div&gt;
      &lt;div class="third"&gt;50.6px&lt;/div&gt;
      &lt;div class="fourth"&gt;51px&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#percentage {
      width: 200px;
      color: white;
  }
  
  #percentage .first {
      width: 50%;
      height: 20px;
      background-color: red;
  }
  
  #percentage .second {
      width: 50.5%;
      height: 20px;
      background-color:green;
  }
  
  #percentage .third {
      width: 51%;
      height: 20px;
      background-color:blue;
  }
  
  #pixels {
      color: white;
  }
  
  #pixels .first {
      width: 50px;
      height: 20px;
      background-color: red;
  }
  
  #pixels .second {
      width: 50.5px;
      height: 20px;
      background-color:green;
  }
  
  #pixels .third {
      width: 50.6px;
      height: 20px;
      background-color:blue;
  }
  
  #pixels .fourth {
      width: 51px;
      height: 20px;
      background-color:red;
  }
  </code></pre>