rowspan 和 colspan 在 Chrome 中不起作用

Question

我有一个代码 sn-p，如下所示。完整代码可以看这里：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。