Safari 14.1 CSS 列数导致容器不必要地扩展答案

【问题标题】：Safari 14.1 CSS column-count causing containers to extend unnecessarilySafari 14.1 CSS 列数导致容器不必要地扩展
【发布时间】：2021-10-27 02:11:06
【问题描述】：

当前尝试在浏览器窗口宽度为 1040 像素时在 2 列段落和单列段落之间切换。我使用 column-count 自动将文本分成 2 列，它在 Chrome 和 Firefox 上始终如一地工作，在 Safari 上也几乎一样。

在测试时，我在 Safari 14.1+ 上发现了一个错误，如果您将浏览器的大小从 >1040px 调整到 768px，包含文本的 div 会由于某种原因展开，当您将其调整回 >1040px 时，问题仍然存在。

这是一个示例代码

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    .border {
        border: 1px solid red;
    }
    @media only screen and (min-width: 769px){
        .columns-md {
            column-count: 2;
            column-gap: 2rem;
            min-height: initial;
        }
    }
    @media only screen and (min-width: 1041px) {
        .columns-off-lg {
            column-count: 1;
            column-gap: initial;
            min-height: 0;
        }
    }
</style>
<body>
    <div class="border">
        <div class="columns-md columns-off-lg">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </div>
    </div>
</body>
</html>

我注意到的其他事项：

通过 Safari 的网络检查器打开/关闭样式似乎可以解决问题，但如果您再次水平调整浏览器大小，其他部分也会出现该错误。
删除列数可以解决问题，但我没有得到想要的设计。
当问题出现
仅当浏览器宽度 >1040 像素然后将大小调整为
在调整浏览器大小之前，必须以 >1040 像素刷新页面以重现问题。
这个问题似乎在早期版本的 Safari 上不存在，但是，我只在 13.1 上测试过。

我的机器目前正在运行 Big Sur 和 Safari 14.1。

知道这只是 Safari 问题还是我的 CSS 问题？

P.S.我还可以确认其他人能够重现该错误。

【问题讨论】：

标签： html css safari

【解决方案1】：

我可以确认这是 Safari 问题。我在自己的项目中遇到了一个非常相似的问题。刷新浏览器时，布局看起来会正确，只有当我调整大小时才会注意到问题，在浏览器检查器内的 CSS 属性之间切换也会立即解决问题，只有当我调整大小时，问题才会再次出现。而且这只发生在 Safari 15 和 Big Sur。

【讨论】：

我们能够解决 css 中自动换行的问题。稍后我会发布代码。