Question

我找到了这个答案，但它没有涵盖我的问题：Are empty divs bad?

我有一个tic-tac-toe游戏插图，看起来大致如下：

    <div class="tic-tac-toe">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

CSS，相关位：

.tic-tac-toe {
    display: block;
    width: 109pt;
    height: 109pt;
    text-align: center;
    margin: auto;
}
.tic-tac-toe div {
    width: 32pt;
    height: 26pt;
    font-family: monospace;
    font-weight: bold;
    padding-top: 6pt;
    background-color: #555;
    float: left;
    margin: 0;
    -moz-box-shadow: 3px 3px 4px #909090;
    -webkit-box-shadow: 3px 3px 4px #909090;
    box-shadow: 3px 3px 4px #909090;
}
.tic-tac-toe div:nth-child(1),
.tic-tac-toe div:nth-child(4),
.tic-tac-toe div:nth-child(7) {
    margin-right: 6pt;
}
. . . /* for other sides */

这里有一些CSS和一些JavaScript。有什么我可以使用而不是divs？我真的需要一个正方形块我可以画背景并在里面放一个字母“X”或“O”。我该怎么办？

Answer 1

本身并不一定很糟糕，但有些浏览器会以不同的方式处理它。例如，旧的IE和Firefox用于隐藏空div。我记得很多 在我的内容被其他内容替换之前，仍然可以看到临时div仍然可见。

Answer 2

您可以通过使用类来标记带有x和o的div来轻松实现这一点。

以下是您如何做到这一点的示例：

.tic-tac-toe > div.x:before {
    content: 'X';
}
.tic-tac-toe > div.o:before {
    content: 'O';
}

我用一个小小的javascript制作了这个简短的小提琴，使用上面的类，在点击时用x和o标记div。

看看这个小提琴：http://jsfiddle.net/En3DV/

Answer 3

使用表格并为每个单元格填充 。（您可能希望标记单元格。）

更换空div？

3 个答案: