在“display:table”元素内的“float:left/right”元素内显示大内容时在 Firefox 上打印时出现问题

Posted 2023-03-06

【中文标题】在“display:table”元素内的“float:left/right”元素内显示大内容时在 Firefox 上打印时出现问题

【英文标题】：Having problems printing on Firefox when displaying large content inside "float: left/right" element inside "display: table" element

【发布时间】：2018-08-07 03:30:33

【问题描述】：

这是我正在尝试的代码...

<div style="display: table">
    <div style="display: table-cell">
        <div style="float: left">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit,

             ...10,000 more lines
        </div>
    </div>
</div>

当使用谷歌浏览器（任何版本）时，它运行正常。这是打印机的样子：

但是当我在 Firefox（任何版本）打印机版本上尝试它时，它看起来像这样：

需要“float: left”，我们可以假设我们需要多于一列，桌面和打印机的显示应该是一样的。

感谢您的帮助

【问题讨论】：

不确定float:left这里有什么需要？

这是一个大型项目，他们有自己的利用左浮动的网格系统。

我得到了同样的结果。在使用<table>、<tr> 和<td> 进行测试时，它可以正常工作，因此您可以使用它们。这也让我觉得你可能发现了一个错误......虽然我对此完全不确定。

“这是一个大型项目，他们有自己的网格系统，利用左浮动” - 是的，但实际上 做什么 - 在这个具体实例？您在这里甚至似乎没有超过一列，因此您至少应该能够覆盖打印样式表中的浮点数......？

@CBroe 无论我们有多少列，结果都是一样的。

【参考方案1】：

有正常的等价标签：

<div style="display: table"> => <table>

<div style="display: table-row"> => <tr>

<div style="display: table-cell"> => <td>

使用<table>、<tr> 和<td> 似乎可以解决问题。由于它们应该做完全相同的事情，但已经存在了更长的时间，因此它们是一个不错的选择。据我所知，display 表并不经常使用。见：

https://css-tricks.com/almanac/properties/d/display

粗略但有时很有用。