logo标签列表

Windows Phone 8中IE10浏览器的文字大小异常

htmlcssinternet-explorerwindows-phone-8windows-phone
3
我在WP8的IE中，遇到了一些关于文本大小的奇怪问题。有两种方法可以测试和查看这个问题：使用IE11（Win8.1）内置的WP8模拟器或使用WP8中的IE。
要查看问题，请查看此网站：https://dl.dropboxusercontent.com/u/50150377/test.html 该文本仅由

和

标签组成。有一个顶部DIV，跨越400px，以及两个底部DIV，向左浮动且每个DIV都跨越200px。

如果您在任何标准浏览器中打开此页面，则会发现H2字体大小一致，其他文本大小也一致。
如果您在IE11的WP8模拟器或WP8版本的IE中访问该页面，则会注意到顶部文本比下方文本大得多。
它是应该这样运作的吗？是否有任何人知道解决方法？这对我的设计造成了一些实际问题。我尝试使用相对和绝对字体大小，但没有任何区别。
以下是一些屏幕截图和我正在使用的代码。我将代码最小化到几乎没有任何东西。非常感谢任何帮助。谢谢！
<!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>

1个回答
3
看起来添加这个 <META> 标签可以解决问题：
<meta name="viewport" 
    content="width=device-width, initial-scale=1.0" />
谢谢！谢谢！谢谢！ - lkessler
唯一的问题是我去掉了user-scalable=no。这会防止用户放大或缩小渲染视图，这是不可取的。 - lkessler
确实，我应该提到这一点。我正在更新我的答案以将其删除... - Adam Plocher
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接