如何在浏览器 Edge 中替换 display:contents

Question

所以，我有一个 table 的行，行高比需要的大很多。在除 Edge 之外的所有浏览器中，我都可以使用 display:contents 解决问题，但在目前不支持此功能的 Microsoft Edge 中，我必须找到替代方案。有人可以给我指出正确的方向吗？

Answer 1

我尝试用Edge检查你的代码并检查结果。我在下面的行中进行了更改并设置了 'height: 30 px' 而不是 300 px.

  <tbody data-link="row" class="rowlink" style="overflow-y: auto; overflow-x: hidden; height: 30px; display: contents;">

现在它可以在包括 Edge 在内的所有主要浏览器中正确显示行。

下面是Edge的测试结果。

Click here to see the image

我认为这是在 Edge 中正确显示输出的最简单的替代方法。

此致

迪帕克

Answer 2

Edge 浏览器和 IE 尚未实现此功能。基本上有两种方法可以打破 flex-row

1)分页（仅适用于 Mozilla）

2) 显示：内容；（仅适用于 Mozilla，Chrome）。

因此，如果知道行数并且有重复的实例要中断，可以使用 display:block 和内联来获得所需的结果。但是在动态重复可用的行和数量的瓷砖时，不可能打破弹性盒子。请报告 Edge 浏览器实现显示：内容。 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis 这是一个非常重要的功能，但错过了。

Answer 3

尝试在使用 display: contents;

的 [your element] 之后将以下代码添加到 CSS

`@supports not (display: contents) { /* workaround because Edge doesn't support display: contents; */
 a.remove {
    display: inline;
 }
}`

将 a.remove 替换为您的元素名称。

how to replace display:contents in browser Edge