4

我正在处理这段代码，这段代码可以正常工作，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>

如果你想在这里看到 JSFiddle 代码在工作

请解释一下为什么div在Firefox覆盖整个屏幕宽度时，它应该只覆盖 50% 的宽度，如图Chrome所示。

4

2 回答 2

3

可能是因为从2.1 规范开始，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 元素的影响未定义。

对于定位布局模块（它们明确定义了行为），这不是真的，但它还没有被供应商采用。

于 2013-06-10T20:07:08.007 回答
1

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

<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>

您可以使用我对您的 jsfiddle 所做的更新来测试它。

如果您确实需要在单元格内使用绝对定位的 div，那么您应该在该单元格内放置一个包含绝对定位的相对定位 div：

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

对原始 jsfiddle 的另一次更新显示了相对 div 中的绝对 div，从左侧偏移 30，从顶部偏移 10。

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

于 2013-06-10T20:12:38.980 回答