Accounting for Rounding errors Grid

Question

I am in search for a pixel perfect grid. I have tried the major frameworks but both have obvious rounding errors. I was hoping to start a conversation on how you guys account for such errors when trying to achieve pixel perfect design.

Chrome seems to render the best with almost no visible error. Safari is the worst.

Here is a screen Shot of Bootstrap Grid in Safari
html:

 <div class="container">
  <!-- Example row of columns -->

 <div class="row">
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>

 </div>

<div class="row">
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>


</div>


<div class="row">
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>



</div>

<div class="row">
    <div class="col-md-4"><div class="content"></div></div>
    <div class="col-md-4"><div class="content"></div></div>
    <div class="col-md-4"><div class="content"></div></div>

</div>

<div class="row">
    <div class="col-md-6"><div class="content"></div></div>
    <div class="col-md-6"><div class="content"></div></div>


</div>

<div class="row">
    <div class="col-md-12"><div class="content"></div></div>


</div>


</div>

(jsFiddle: http://jsfiddle.net/gnrhca1p/)

Here is an example of the Foundation grid in Safari html:

  </div>
  <div class="row">
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-4 columns"><div class="content"></div></div>
      <div class="medium-4 columns"><div class="content"></div></div>
      <div class="medium-4 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-6 columns"><div class="content"></div></div>
      <div class="medium-6 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-12 columns"><div class="content"></div></div>


  </div>

(jsFiddle: http://jsfiddle.net/)

Answer 1

Here are a couple solutions that I found but have not tried:

https://github.com/zurb/foundation/issues/3230