Question

我正在处理此代码，此代码在Chrome中正常工作，但在Firefox

中无效

这是代码

<html lang="en-US">
<body><table style="width: 100%;">
<tbody><tr>
<td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;">
<div style="position: absolute; background-color: blue; height: 100%; width: 100%;"></div></td>
<td style="position: relative; width: 50%; height: 500px;"></td>
</tr>
</tbody></table>
</body>
</html>

If you want to see here is JSFiddle for code in working

请解释div Firefox Chrome覆盖整个屏幕宽度的原因，它应该只显示{{1}}显示的宽度的50％。

Answer 1

可能是因为2.1 Specification对表格单元格的相对定位是由CSS定义的：

根据正常流量计算箱子的位置（这称为正常流量中的位置）。然后该框相对于其正常位置偏移。当框B相对定位时，计算下一个框的位置，就好像B没有偏移一样。 'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table的影响-caption元素未定义。

Positioned Layout Module（它们明确定义了行为）并非如此，但供应商尚未采用它。

Answer 2

问题是内部DIV的position: absolute;：

<html lang="en-US">
  <body>
    <table style="width: 100%;">
      <tbody>
        <tr>
          <td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;">
            <div style="background-color: blue; height: 100%; width: 100%;"></div>
          </td>
          <td style="position: relative; width: 50%; height: 500px;">
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

您可以使用update I made to your jsfiddle进行测试。

如果你真的需要在单元格中使用绝对定位的div，那么你应该在该单元格中放置一个包含绝对值的相对定位div：

<td>
  <div style="position: relative; ... ">
    <div style="position: absolute;... ">
      ...
    </div>
  </div>
</td>

This another update to the original jsfiddle在相对的内部显示一个绝对div，左边偏移30，顶部偏移10。

stackoverflow中的旧线程可能很有用：Using Position Relative/Absolute within a TD?

Firefox中的Div位置问题

2 个答案: