Why does Chrome draw two lines where Firefox displays one?

Question

I am trying to make a grid of responsive squares, which would look similar to a squared paper. I used a pre-prepared solution, which I tried to adopt to my purpose. My HTML code looks like this (example grid of 4*4 squares):

.square {
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  margin: 0%;
  overflow: hidden;
}

.content {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0%;
}

.table {
  display: table;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  border: thin solid black;
}

<div id="grid">
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
</div>

The grid is OK in Firefox. But when I look at it in Chrome, it displays two lines between second and third row (and between second and third column) instead of one. I tried to set .square background-color to black. It worked partially, but the line in question looks thicker than the others. Is there a batter solution?

Please add a runnable code snippet. It will increase chance of people checking your code. — c69, Jan 13 '18 at 11:08
It appears that "thin" means `0.5px` in Chrome but `1px` in Firefox/Edge. Furthermore, you are setting the width to `25%` but the container (in this case) does not divide equally (it is `605px` wide in the snippet). This results in squares of length `151.25px`, which results in rounding issues when aligning to real pixels. Maybe try putting this on your container instead: `background-image: linear-gradient(to bottom, transparent 99%, black 99%), linear-gradient(to right, transparent 99%, black 99%); background-size: 25%;` — Niet the Dark Absol, Jan 13 '18 at 11:10
@c69 It is there now (not thanks to me). I am sorry not to add it first place. I am not very familiar with site. — Radek John, Jan 13 '18 at 11:22
@Niet the Dark Absol Can you please clarify? I tryed .square { float:left; position: relative; background-image: linear-gradient(to bottom, transparent 99%, black 99%); background-image: linear-gradient(to right, transparent 99%, black 99%); background-size: 25%; } And there is no grid. — Radek John, Jan 13 '18 at 11:35
[Similar issue](https://stackoverflow.com/a/26466789/87015) in Chrome caused by rounding values — Salman A, Jan 13 '18 at 11:41

Alex Berger · Answer 1 · 2018-01-13T11:48:53.097

1

I guess your problem ist, that you have display:table and thus have double-borders inside yuor table. You can fix that with border-collapse:collapse inside your .table class.

Here's a working fiddle, no more thik lines, noe double borders in chrome: https://jsfiddle.net/Hoargarth/kh7fyegk/

Edit: I forgot to mention, that i also changed border: thin solid black; to border: 1px solid black; inside the fiddle, to remove the thick lines in chrome.

edited Jan 13 '18 at 11:48

answered Jan 13 '18 at 11:43

Alex Berger

1,357
1
10
22

You can check the fiddle again, since I accidentally posted the fiddle before saving it, after my changes to remove the thicker lines in Chrome.--Edit: now i see what you mentioned with even/odd numbers. Looks like a rendering problem with chrome. – Alex Berger Jan 13 '18 at 11:50
Yes, this solution is OK. Thanks a million! – Radek John Jan 13 '18 at 11:53

score 1 · Answer 2 · answered Jan 13 '18 at 11:49

add border-collapse: collapse; in table class

       .square {    
        float:left;
        position: relative;
        width: 25%;
        padding-bottom : 25%;
        margin:0%;
        overflow:hidden;    
    }
    .content {
        position:absolute;
        height:100%; 
        width:100%;
        padding: 0%;
    }
    .table{
        display:table;
        height:100%;
        width:100%;
        padding: 0%;
        margin: 0%;
        border-collapse: collapse;
    }
    .table-cell{
        display:table-cell;
        vertical-align:middle;
        height:100%;
        width:100%;
        padding: 0%;
        margin: 0%;
        border: thin solid black;
    }

 <div id="grid">
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
</div>

score 1 · Accepted Answer · answered Jan 13 '18 at 11:52

There is no proper solution for this. Seems like Chrome rounds off widths on display: table but not on display: block. Slight change of markup produces consistent result:

.square {
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  margin: 0%;
  overflow: hidden;
}

.content {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0%;
}

.table {
  /* removed display table */
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.table-cell {
  /* removed display table-cell */
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  border: thin solid black;
  /* added */
  box-sizing: border-box;
}

<div id="grid">
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 4 · answered Jan 13 '18 at 11:43

0

If you remove the position: relative from the .square and add the height to .content does it solve your problem ?

answered Jan 13 '18 at 11:43

DrNeverMind

26
1
2

Why does Chrome draw two lines where Firefox displays one?

4 Answers4