绘制响应井纯粹的（没有JS）HTML和CSS的井字板

Question

我正在解决的HTML布局问题类似于绘制HTML + CSS和没有任何JS的响应井字游戏板。下面是我如何定义电路板的布局：

<div class="board"> 
    <div class="lines"> 
     <div class="line"> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
     </div> 
     <div class="line"> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
     </div> 
     <div class="line"> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
      <div class="cell"> 
       <div class="cell-content"></div> 
      </div> 
     </div> 
    </div> 
</div> 

，这里是相应的CSS：

.board { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border:1px solid black; 
    box-sizing:border-box; 
} 
.board:before { 
    content:""; 
    display: block; 
    padding-top: 100%; 
} 
.lines { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 
.line { 
    width: 100%; 
} 
.cell { 
    float: left; 
    width: 33.3333%; 
    border:1px solid black; 
    box-sizing:border-box; 
} 
.cell:before { 
    content:""; 
    display: block; 
    padding-top: 100%; 
} 
.cell-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

在这里，我没有设置任何尺寸除了width: 33.3333%。板子和领域的高度使用Height equals width with pure CSS方法设置。

而且我会注意到几乎所有东西都很棒。这里唯一的问题是：有时板单元的宽度/高度之和小于板的宽度/高度。这意味着我可以看到最后一个边框和纸板边框之间的差距。我可以用Chrome或FF重现它，但它在IE中绝不会发生。有没有办法来解决这个问题？

演示可从jsfiddle (the red line is what I'm trying to get rid of)

UPDATE：它发生在IE浏览器也，不知道为什么，我以前没见过。

Answer 1

简单修复就是给.line元素溢出：auto;

.line { 
    overflow: auto; 
} 

和你的好去：d