Question

flexbox内的段落有一些意外的行为。仅在检查“请求桌面站点”或在chrome中使用开发人员工具并打开“设备工具栏”并将设备尺寸设置为较小（例如320x500）时，此操作才会在chrome移动设备上发生。有关示例，请参见以下html：

<html>

<head>
  <meta name="viewport" content="width=980">
  <style>
    p {
      border: solid red 1px;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <p>These should be the same size</p>

  <div style="display: flex; flex-wrap: wrap; justify-content: center;">
    <p>These should be the same size</p>
    <div style="width: 830px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
    </div>
  </div>
</body>

</html>

预期的行为：所有字体大小都应该相同。显然不是这种情况，请参见屏幕截图。

但是，当从“ Lorem ipsum”段落中删除一行时，所有内容都将变成相同的小尺寸（这也是我在上一个示例中所期望的）。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum.</p>

此代码中是否存在错误，这是浏览器错误还是html / css规范中的错误？我只在Android上的chrome和Windows 10上的chrome中对此进行了测试。

Answer 1

使用文本大小调整

cast(? as NUM_LIST)

flexbox中段落的字体大小的异常行为

1 个答案: