为什么在这些TD元素的字体呈现在不同的大小? [英] Why does the font in these TD elements render at different sizes?

查看:375
本文介绍了为什么在这些TD元素的字体呈现在不同的大小?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

下面是2次达阵一个简单的表。
http://z5h.github.io/broken_render/broken.html

Here is a simple table with 2 TDs. http://z5h.github.io/broken_render/broken.html

在最近的Chrome / Firefox的Andr​​oid上的渲染,他们在非常不同的大小。我不清楚为什么。

On recent Chrome / Firefox on Android they render at VERY different sizes. I'm not clear why.

在桌面浏览器,他们不知道。

On Desktop browsers they do not.

减少文字的ammount的第一TD解决了这个问题。
每个元素的样式指定不改变字体大小。
例如
http://z5h.github.io/broken_render/broken-styled.html

Reducing the ammount of text in the first td fixes the problem. Specifying per element styles does not change the font size. e.g. http://z5h.github.io/broken_render/broken-styled.html

这是为什么?

code是

<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type'> 
  </head>
  <body>
    <table>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </td>
      </tr>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </td>
      </tr>
    </table>    
  </body>
</html>

这是它看起来像在Firefox完全是最新的Chrome在Nexus 4同样的问题。

This is what it looks like on a fully up to date Chrome on Nexus 4. Same problem on Firefox.

推荐答案

大多数移动浏览器尝试检测网页的主要内容和放大,使用户不会有放大网页上没有明确的移动设计,这被称为文本通货膨胀和由文本大小 - 控制调整 CSS属性在大多数情况下。

Most mobile browsers try to detect the main content of the page and enlarge it so that the user wont have to zoom in on pages without an explicit mobile design, this is called "Text Inflation" and is controlled by the text-size-adjust CSS property in most cases.

从上面的链接被盗语法例如:

Stolen syntax example from the above link:

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */

请注意,文字大小调整物业管理不规范,从而可以必须与 -webkit pfixed $ P $ - -moz - ,和其他浏览器厂商的prefixes

Please note that the text-size-adjust property is not standardized, and thus may have to be prefixed with -webkit-, -moz-, and other browser vendors' prefixes.

此外,不要与字体 -size调整混淆。 : - )

Also, not to be confused with font-size-adjust. :-)

这篇关于为什么在这些TD元素的字体呈现在不同的大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆