我在 WP8 的 IE 中遇到了一些关于文本大小的奇怪问题。有两种方法可以测试和查看:使用 IE11 (Win8.1) 内置的 WP8 模拟器或使用 WP8 中的 IE。
要查看问题，请查看此网站:https://dl.dropboxusercontent.com/u/50150377/test.html
文本仅由 <H2> 组成和 <P>标签。有一个跨度 400 像素的顶部 DIV，以及两个向左浮动且每个跨度 200 像素的底部 DIV。
如果您在任何标准浏览器中访问此页面，您会看到 H2 字体大小是一致的，其他文本大小也是一致的。
如果您在 IE11 的 WP8 模拟器或 WP8 版本的 IE 中访问该页面，您会注意到顶部文本比底部文本大得多。
它应该这样做吗？有没有人知道的解决方法？这对我的设计造成了一些实际问题。我试过使用相对和绝对字体大小，但没有任何区别。
这是一些屏幕截图和我正在使用的代码。我已将代码最小化到几乎没有。任何帮助将不胜感激。谢谢!
在 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>
最佳答案
看起来像添加这个 <META>标记修复了问题:
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
关于html - Windows Phone 8 的 IE10 中的奇怪文本大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19265442/