当另一个单元格中有标签时，表格单元格中有不需要的空间答案

【问题标题】：Unwanted space in table cell when another cell has a tag within it当另一个单元格中有标签时，表格单元格中有不需要的空间
【发布时间】：2021-02-02 22:38:26
【问题描述】：

我无法理解为什么下面的两个 HTML 块呈现不同。黄色和粉红色的表格缺少 BR 标记，流动效率很高，绿色和蓝色的表格在蓝色单元格的文本中间有   标记，在绿色单元格中有不需要的空间。我尝试过渲染为弹性框和表格，它们的渲染方式相同。我试过不同的浏览器，它们的渲染方式都是一样的。

在绿色和蓝色布局中遵循什么规则会导致绿色单元格中出现空白？

如何获得像黄色和粉色外壳一样的渲染并使用  标签？我其实是在标签之后，但我们只谈谈 标签，我认为这是最简单的情况。

<html><body>

<div style="display: flex; flex-flow: row;">
<div style="background-color: green;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>
<div style="background-color: blue;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
</div>
</div>

<br/>

<table>
<tr>
<td style="background-color: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</td>
<td style="background-color: pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
</td>
</table>
<br/>

</body></html>

截图：

如果为 div 分配了高度，则不会删除空格（请参见下面的深绿色），并且如果允许将   标记放入具有单元格高度的表格中，则空格会在单元格的顶部和底部（请参见下面较浅的绿色） - 但 height 属性无论如何都不会影响渲染：此行为在 FireFox 80.0 和 Chrome 版本 85.0.4183.83 中出现

【问题讨论】：

标签： html-table flexbox

【解决方案1】：

这是怎么回事：

在div 和display: flex; flex-flow: row 中，您有两个孩子，绿色和蓝色divs。
浏览器计算它们各自的宽度（它是宽度，因为flex-flow: row）如下：
- 绿色div 的宽度的计算是直截了当的。它是一行中整个文本的宽度。
 => greenWidth
- 由于 ，蓝色div 的计算稍微复杂一些。这会导致文本一分为二。然后，浏览器计算这两位文本的宽度，它们将分别占据一行。然后它需要更广泛的这些。
 => blueWidth
绿色和蓝色框的默认值为flex-basis，即auto。对于绿色框，浏览器采用 greenWidth，对于蓝色框，它采用 blueWidth 作为 auto 的结果。

我还没有想出一个实际的解决方案，但也许，基于以上，你可能会想出一些办法。

【讨论】：

是的，是的，我可以——经过多次摆弄。

【解决方案2】：

Christian 指向正确的方向。了解问题归结为受标签影响的大小，我允许浏览器调整未标记内容的大小，但隐藏了它的呈现。

“解决方案”是有两个文本主体，一个带有标签，另一个不带标签。没有标签的文本是color:transparent;，并以正常的文本流定位。通过使用高于普通文本的z-index，将带有标签的文本呈现在透明文本位置的文档文本流之上。带有标签的文本有可能会溢出表格，因此请在考虑这种可能性的情况下布局您的页面（或稍微填充没有标签的文本）：

<html><body>

<div style="display: flex; flex-flow: row;">

<div style="background-color: #FFA;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>

<div style="position: relative; background-color: #FDD;">
<div style="position: absolute; z-index:2;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
</div>

<div style="color:transparent;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
</div>
</div>

</div>

</body></html>

【讨论】：

【解决方案3】：

在弹性盒中，项目被拉伸到容器的高度（如果项目的高度没有定义）。但是，您可以通过将绿色 div 设置为高度来更改此行为。假设高度为100px；

<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: green; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>
<div style="background-color: blue;">
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
 laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
 architecto beatae vitae dicta sunt explicabo. 
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam 
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
</div>
</div>

<br/>

<table>
<tr>
<td style="background-color: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</td>
<td style="background-color: pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
architecto beatae vitae dicta sunt explicabo. 
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam 
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
</td>
</tr>
</table>
<br/>

</body></html>

【讨论】：

这不起作用。请参阅我刚刚添加的它不起作用的示例。