3

我在 IE 中为 WP8 的文本大小遇到了一些真正的怪异。有两种方法可以测试和查看：使用 IE11 (Win8.1) 中内置的 WP8 Emulator 或使用 WP8 中的 IE。

要查看问题，请查看此网站：https ://dl.dropboxusercontent.com/u/50150377/test.html

文本仅由<H2>和<P>标签组成。有一个顶部 DIV 跨度为 400 像素，两个底部 DIV 向左浮动，每个跨度为 200 像素。

如果您在任何标准浏览器中访问此页面，您会看到 H2 字体大小是一致的，而其他文本大小是一致的。

如果您在 IE11 的 WP8 Emulator 或 WP8 版本的 IE 中访问该页面，您会注意到顶部文本比底部文本大得多。

它应该以这种方式行事吗？有没有人知道的解决方法？这给我的设计带来了一些实际问题。我试过使用相对和绝对字体大小，但没有区别。

这是一些屏幕截图和我正在使用的代码。我已经将代码最小化到几乎没有。任何帮助将不胜感激。谢谢！


在 WP8 上渲染：

在 WP8 中渲染

在桌面上渲染（IE、FF、Chrome）：

在桌面上渲染


<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family:arial; }
        .infoBox h2 { font-size:14px; }
        .infoBox p { font-size: 12px; }
    </style>
</head>
<body>
    <div id="main">
        <div class="infoBox" style="width:400px">
            <!-- This text is MUCH larger in IE for WP8 -->

            <h2>THIS IS A TEST</h2>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
        </div>

        <div class="infoBox" style="width:200px;float:left;height:400px;">
            <!-- This text will be smaller in IE for WP8 -->

            <h2>THIS IS A TEST</h2>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
        </div>

        <div class="infoBox" style="width:200px;float:left;height:400px;">
            <!-- This text will also be smaller in IE for WP8 -->

            <h2>THIS IS A TEST</h2>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
            <p>The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  </p>
        </div>
    </div>
</body>
</html>
4

1 回答 1

3

看起来添加这个<META>标签可以解决问题：

<meta name="viewport" 
    content="width=device-width, initial-scale=1.0" />
于 2013-10-10T03:07:44.697 回答