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

Question

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

当前尝试在浏览器窗口宽度 <769px 和 >1040px 时在 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>

Run Code Online (Sandbox Code Playgroud)

我注意到的其他事情：

通过 Safari 的 Web 检查器打开/关闭样式似乎可以解决该问题，但如果您再次水平调整浏览器大小，其他部分也会出现该错误。
删除列数可以消除该问题，但随后我没有得到所需的设计。
当问题出现在 <769px 时，当文本被分割时，在 769px 到 1040px 之间不会出现该问题，而当文本位于单个段落中时，该问题会重新出现。
仅当浏览器宽度>1040px，然后调整到<769px时，才会出现此问题。
在调整浏览器大小之前，必须刷新页面 >1040 像素才能重现问题。
这个问题似乎在早期版本的 Safari 上不存在，但是，我只在 13.1 上进行了测试。

我的机器当前运行的是 Big Sur 和 Safari 14.1。

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

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

Answer 1

Sha*_*lva 6

.safari-wrapping-fix {
    display: inline-block;
    white-space: nowrap;
}

Run Code Online (Sandbox Code Playgroud)

将上面的 css 添加到结束“p”标记之前的 span 元素。这为我们解决了这个问题。

例子：

<p>Lorem Ipsum <span class="safari-wrapping-fix"></span></p>

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，3 月前
查看次数：	1376 次
最近记录：	3 年，4 月前