使子元素高度/宽度完全匹配父级

Question

我有一个场景，我有灰色方块，我希望用橙色方块完全覆盖 。

我各自的高度/宽度设置完全相同，但是浏览器渲染橙色框，因此它们 liiiiittle太高（1px）并且有点太窄（1px ）。不幸的是，我不能只是calc(19vh - 1px)来解决这个问题，因为它取决于视口大小。这个额外的像素来自哪里？

我做了一个简化的例子并在此发布：http://jsfiddle.net/165jnswd/

修改 可以在此处找到更多简化示例：http://jsfiddle.net/165jnswd/2/

Answer 1

它来自表格的边框间距。如果将其设置为0，则表格\ t体\ tr \ tdd的高度相同。

table {
    table-layout: fixed;
    margin: 9vh auto 0;
    /*border-spacing: 0.6vh; -- change this -- */
    border-spacing: 0;
    border-collapse: separate;
  }

  td.cell {
    position: relative;
    text-align: center;
    border: 1vh solid #999;
    border-radius: 1vh;
    background-color: #fff;
    color: #999;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
  }

  .sz3x3 {
    width: 19vh;
    height: 19vh;
  }

  .sz4x4 {
    width: 14vh;
    height: 14vh;
  }

  td.black {
    background-color:#999;
    color:#fff;
  }

  td.white {
    background-color: #fff;
    color: #999;
  }

  td.par {
    background-color: #ffdfbd;
  }

  td.par.selected {
    background-color: #fdc07d;
  }

  td.selected {
    background-color: #eee;
  }

  .number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 7.5vh;
  }

  #selector {
    top: -1vh;
    left: -0.9vh;
    border: 1vh solid #ef8d22;
    border-radius: 1vh;
    position: absolute;
    box-sizing: border-box;
    z-index: 999999;
  }

<div id="game-content">
   <div id="game-screen"></div>
   <div id="board-container">
      <table>
         <tr>
            <td class="cell sz3x3" data-x="0" data-y="1">
               <div class="number"></div>
               <div id="selector" class="sz3x3"></div>
            </td>
            <td class="cell sz3x3" data-x="1" data-y="1">
               <div class="number"></div>
               <div id="selector" class="sz3x3"></div>
            </td>
            <td class="cell sz3x3" data-x="2" data-y="1">
               <div class="number"></div>
               <div id="selector" class="sz3x3"></div>
            </td>
         </tr>
      </table>
   </div>
</div>