0

我发现以下 HTML flex 布局（用于显示消息）在 Android Chrome 中的行为非常奇怪：第二段被分成两行，即使它有足够的空间容纳一行。结果显示在代码下方的屏幕截图中，以及 flex 布局的叠加层（Chrome 中的调试选项）。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Incorrect line break</title>
</head>
<body>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row-reverse;">
        <div style="display: flex; flex-direction: row-reverse;">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum</span>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</span>
    </div>
</div>
</body>
</html>

弹性布局的错误

如果我更改此代码的任何部分，有问题的换行符就会消失。例如，我观察到的一件非常奇怪的事情是，如果我将第 3 段缩短一个字符（删除末尾的 t），问题就会消失：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Incorrect line break</title>
</head>
<body>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row-reverse;">
        <div style="display: flex; flex-direction: row-reverse;">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum</span>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u</span>
    </div>
</div>
</body>
</html>

删除最后一个字符时没有错误

此问题只能在 Android Chrome（最新版本，97.0.4692.98）中重现，桌面版 Chrome 将正确呈现 HTML（没有换行符）。用于测试的设备是运行 Android 12 的三星 A52s 5G。

我怀疑这是 Android Chrome 中的一个错误，因为它只发生在那里。你同意或者你能在 HTML 代码中发现一些可能导致这种奇怪行为的具体问题吗？

4

0 回答 0