简体   繁体   English

在Windows Phone 7.5上的Internet Explorer中将边距应用于body元素时,为什么我的字体大小如此混乱?

[英]Why are my font-sizes so messed up when applying a margin to the body element in Internet Explorer on Windows Phone 7.5?

I have a comparatively simple website in terms of HTML and CSS and it looks fine in Desktop browsers (IE9/Chrome). 我有一个相对简单的HTML和CSS网站,它在桌面浏览器(IE9 / Chrome)中看起来很好。 However when I view it in Internet Explorer in Windows Phone 7.5 it seems to make the text inside of unordered lists huge or tiny for some reason, 但是,当我在Windows Phone 7.5中的Internet Explorer中查看它时,由于某些原因,它似乎使无序列表中的文本变得很大或很小,

Here is code that produces weird results 这是产生奇怪结果的代码

<!DOCTYPE html>
<head>
<style type="text/css">
body {
  margin: 0px 0px;
}
h1 {
  font-size: 250%;
}
h2 {
  font-size: 150%;
}
h3 {
  font-size: 120%;
}
</style>
</head>
<body>

  <h1>H1 header</h1>
  <h2>H2 header</h2>
  <h3>H3 header</h3>
  <p>Some paragraph text</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>

</body>
</html>

Take a look at the size of the li text, it should be the size of the p tag but it is tiny. 看一下li文本的大小,它应该是p标签的大小,但它很小。 For a version of this file online see this link here 有关此文件的在线版本,请在此处查看此链接

I have narrowed it down to the margin property on body and on a div, if either of these are set then the text proportions go crazy. 我把它缩小到了body和div上的margin属性,如果其中任何一个被设置,那么文本比例会变得疯狂。 Why does this happen? 为什么会这样? Is this a bug? 这是一个错误吗? I can work around this but it is far more convenient for me to set the margin on a container rather than all children individually 我可以解决这个问题,但是对于我来说,在容器上设置边距而不是单独设置所有子设置要方便得多

Seems that internet Explorer mobile for Windows Phone 7 applies some kind of font-resizing to optimize the content, but this just ends up screwing up my site at least, see this PDF 'Windows Explorer Mobile for Windows Phone 7 which explains briefly. 似乎用于Windows Phone 7的Internet Explorer移动设备应用某种字体大小调整来优化内容,但这至少会搞砸我的网站,请参阅此PDF“用于Windows Phone 7的Windows资源管理器移动版”,其中简要介绍。

To stop this behaviour, include this bit of CSS 要停止此行为,请包含此CSS

html {
   -ms-text-size-adjust: none;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM