rowspan和colspan在Chrome中不起作用

Question

我有一个代码片段，如下所示。完整代码可以在这里看到：http://codepen.io/anon/pen/VYbxbQ

<table style="display: inline-table; width: 1220px;">
  <tbody>
    <tr style="">
      <td rowspan="3">
        <a href="#">
          <div style="height: 440px; width: 280px; background: #000;"></div>
        </a>
      </td>

...

在Chrome中加载时，布局看起来不太紧张。在Firefox中加载时，它看起来很紧凑，看起来应该是什么样子。

有什么想法吗？

Answer 1

您正在使用定义的宽度和高度混合colspan / rowspans，这将使您很难预测此布局，正如您现在所经历的那样。

如果您出于布局目的而这样做，我建议不要使用表格。查看this Stack Overflow question了解详情。

尝试使用网格布局。有很多可用的，比如Bootstrap和Foundation。