为什么溢出剪辑在 Chrome 中的表格上不起作用？

Question

我有一个带有

tr

的表格，可以缩小并可以作为菜单打开，我的问题是在我的代码中，我将

tr

放在

position absolute

中，并带有

overflow clip

和

position relative

中的内容它工作得很好，但在 chrome 上，不考虑

overflow clip

。

以下是示例代码和屏幕截图，说明了 2 个浏览器上的行为：

<body>
  <table>
    <thead>
      <tr>
        <th>Table content title</th>
      </tr>
    </thead>
    <tobdy>
      <tr class='crop'>
        <td>Table contents</td>
      </tr>
    </tobdy>
  </table>
</body>

table {
  border-collapse: collapse;
}

td {
  background: red;
  padding: 10px 20px;
}

.crop {
  position: relative;
  height: 23px;
  border: 2px solid black;
  overflow: clip;
}

.crop td {
  position: absolute;
}

Firefox（我想要的）：

铬：

Answer 1

为了实现跨浏览器的一致行为，您可以通过以下方式重构布局：

将的内容包装在应用了 Overflow: 剪辑的 div 中。
避免直接在 or 上使用position:absolute，因为它会破坏表结构。这是更新的代码：

table {
    border-collapse: collapse;
  }

  td {
    background: red;
    padding: 10px 20px;
  }

  .crop {
    height: 23px;
    border: 2px solid black;
  }

  .clip {
    position: relative;
    height: 100%;
    overflow: clip;
  }

<html>

    <body>
  <table>
    <thead>
      <tr>
        <th>Table content title</th>
      </tr>
    </thead>
    <tbody>
      <tr class="crop">
        <td>
          <div class="clip">
            Table contents
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

为什么溢出剪辑在 Chrome 中的表格上不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么溢出剪辑在 Chrome 中的表格上不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1