小编Blo*_*orf的帖子

Safari 通常在页面加载时应用任何大小的样式。但是，如果自上次重新加载以来的任何时候窗口已针对移动设备调整大小，则它不会应用桌面样式。

要最轻松地查看/触发行为，请在 Safari 13 中以桌面大小打开站点并查看所需的布局（此处最值得注意的是导航栏）。将浏览器调整为移动布局（确保导航切换到汉堡模式），然后返回到桌面布局。（您也可以先在移动设备上加载站点，然后只需加宽窗口即可。）

在此处查看测试用例：https : //www.davincilabs.com/

正常行为（如负载）：

浏览器调整大小后（仅限 Safari 13）：

如果您检查菜单元素，您将看到应用了 styles-l.css 和 navigation-desktop.css。调整大小后，样式表不再适用。

重要提示：这似乎不是 JavaScript 问题！如果您从开发菜单中禁用 JavaScript，该行为仍然会发生。

回顾一下：

• 仅在 Safari 13 中找到。到目前为止，我们测试过的 Safari 的早期版本没有遇到这种情况。其他经过测试的浏览器（Chrome、Firefox、Edge）不会遇到这种情况。
• 我只在桌面上体验过。这也可能会影响手机，但我的测试用例无法重现；我没有使用任何足够小的断点。
• 初始页面加载始终正确
• 当窗口放大到大于移动断点时触发问题
• Safari 似乎不再将整个加载的样式表文件 (styles-l.css) 应用于页面布局
• 即使关闭 JavaScript 也会发生

这一定是相当罕见的，因为经过大量搜索后我找不到其他事件，但它影响了我正在处理的多个站点。最后，如果您让 Safari 在检查器中重新考虑 CSS 规则（例如通过手动编辑媒体查询的参数），Safari 将立即正确地重绘页面。

我有一个动态生成的 UL/LI 列表，其中包含可变数量的元素，水平显示。我想设置 CSS，以便在需要换行时，列表中的最后两个元素始终换行在一起。

标记：

<ul>
<li>A</li>
<li>B</li>
...
</ul>

输出

<ul>
<li>A</li>
<li>B</li>
...
</ul>

列表使用的空间是响应式的，并且元素是动态的，因此固定宽度没有任何帮助。我无法控制标记，因为它来自 CMS。我的列表项当前是浮动的，但更改为 flex 或 inline-block 就可以了。

这在纯 CSS 中可能吗？