添加填充时，移动设备上的边缘会极大地减小字体大小

问题描述 投票：2回答：1

我正在尝试优化移动设备的网站，并在Windows 10 Mobile上的Edge中偶然发现了这个奇怪的问题：

当我使用除了全边框边框/边距/无填充框之外的任何东西时，字体大小会大大减少。请参阅以下最小示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Edge Test</title>
</head>
<body>
    <div>
        <h1>Without padding</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum.</p>
    </div>

    <div style="padding: 1em">
        <h1>With padding</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum.</p>
    </div>
</body>
</html>

这就是它在我的手机上看起来的边缘：

enter image description here

如果我设置边距或边框而不是填充或将宽度设置为除100%或auto以外的任何值，也会发生同样的情况。

我想这是边缘的一个错误（我使用的是版本25.10586.318.0）？或者是出于某种奇怪的原因预期的行为？ 无论哪种方式，有没有办法避免文本缩减，而不必设置固定的字体大小？

html css mobile microsoft-edge
1个回答
1
投票

在文档的head部分添加以下两行：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.