问题描述:

  页面宽度有限的情况下显示大数据,采用font-size:8px来压缩字体大小,版本 25.0.1547.66及以下版本的chrome浏览器没有问题,后续版本的就不可以了;

问题原因:

  浏览器设置了最小字体限制;配置文件在"Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences",内容如下:  

"webkit" : {
"webprefs" : {
"default_fixed_font_size" : 11,
"default_font_size" : 12,
"fixed_font_family" : "Bitstream Vera Sans Mono",
"minimum_font_size" : 12,
"minimum_logical_font_size" : 12,
"sansserif_font_family" : "Times New Roman",
"serif_font_family" : "Arial",
"standard_font_is_serif" : false,
"text_areas_are_resizable" : true
}
}

所以当设置了小于12px的字体是无效的;

历史解决方案:

  经查询以前大家经常用-webkit-font-size-adjust:none;新版浏览器已不再支持该属性;有人还提出了用css3中的-webkit-transform:scale(num),其中num是设置的字体大小/12px,如font-size:8px,则num=8/12=0.67,不过这种方法虽然可以实现小字体,但是字体仍然“占位”即占据大字体的位置只是缩小了字体;

现在的解决方案:  

  配合html,-webkit-transform:scale(num)来解决问题。

<td class=" ft8" title="289"><em>289</em></td>
.ft8 {
font-size: 8px;
font-family: Arial;
}
.ft8 em {
display: inline-block;
width: 10px;
height: 10px;
-webkit-transform: scale(0.7,0.7);
}

ft8父级样式来定位需要变换的元素的"流",ft8 em来设置变换,这样就可以了。

												

Chrome浏览器最小字体12px限制问题解决方法的更多相关文章

  1. chrome 浏览器最小字体为12px 的解决办法

    http://banri.me/web/webkit-text-size-adjust.html 对div进行缩放 12*0,75 = 9 px -webkit-transform: scale(0. ...

  2. 浏览器最小显示12px字体的解决方法

    今天做打印标签,发现浏览器最小字体限制了12px,标签那么小,12px随便几个字就给占满了: 最后通过  transform:scale(1,0.8) 搞定: 这个属性允许将元素移动.压缩.旋转:这里 ...

  3. 中文版Chrome浏览器不支持12px以下字体的解决方案

    中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...

  4. chrome不支持字体12px

    如果网页字体小于12px的话,人眼看着会不太舒服,所以chrome的最小字体为12px. 如果想要缩小字体,可以尝试用CSS3中的 transform: scale(相应的缩小倍数)来实现. 不过不推 ...

  5. html{-webkit-text-size-adjust:none;}(取消浏览器最小字体限制)

    2016年10月13日 09:31:58 ITzhongzi 阅读数 9409   1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 ht ...

  6. 浅谈配置chrome浏览器允许跨域操作的方法

    浅谈配置chrome浏览器允许跨域操作的方法 一:(Lying人生感悟.可忽略) 最近有一天,对着镜子,发现满脸疲惫.脸色蜡黄.头发蓬松.眼神空洞,于是痛诉着说生活的不如意,工作没激情,工资不高,一个 ...

  7. chrome浏览器下的xdebug helper使用方法

    chrome浏览器下的xdebug helper使用方法     自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...

  8. 亲历谷歌 Chrome 浏览器弹窗境外广告的解决方法(图) | 技术乐园

    亲历谷歌 Chrome 浏览器弹窗境外广告的解决方法(图) | 技术乐园 转 https://www.hack520.com/338.html 谷歌的 Chrome 浏览器是我非常喜欢的一款的浏览器, ...

  9. 针对谷歌默认最小字体12px的正确解决方案 (css、html)

    今天晨会,产品要求把以前12px的字体改小一点,我心想这有什么难的,就随口答应了.哪知,改css的时候,谷歌浏览器中font-size小于12px时,字体就不会再缩小了.当时我的第一反应就是会不会是其 ...

随机推荐

  1. PHPCMS新闻内容调用方法介绍

    {template "content","header"} ---------- 调用根目录下phpcms\template\content\header文件 ...

  2. Spring MVC 知识总结

    参考文章:http://www.oschina.net/question/84460_9608 孔浩视频 1. 几个关键类: RequestMappingHandlerMapping 和 Reques ...

  3. Ubuntu16.04中查看硬盘的型号和读取速度

    最近在测试FTP服务器,上传和下载的速度与很多因数有关,其中,硬盘的读取速度就是其中不同的区别点,我同时用了三台不用的服务器架设FTP服务,一台是出来ftp服务外还含平台其他管理软件,一台是全新的系统 ...

  4. Delphi7编译时,发生Access violation at address 00A7B628 in module 'dcc70.dll'. Read of address 00000000.(Delphi6升级到Delphi7)

    最近接了一个项目,要求使用Delphi7来开发程序,可是由于我们之前均使用delphi6来开发程序的,而且Delphi6使用很长时间了,积累并改造了第三方控件很成熟了: 故把Delphi6的控件移植( ...

  5. 20145302张薇《Java程序设计》实验五报告

    20145302张薇 实验五:Java网络编程及安全 实验内容 掌握Socket程序的编写: 掌握密码技术的使用: 设计安全传输系统. 实验要求 基于Java Socket实现安全传输 基于TCP实现 ...

  6. Kali视频学习1-5

    Kali视频学习1-5 安装 安装Kali虚拟机 设置网络更新,使用了163的源 deb http://mirrors.163.com/debian wheezy main non-free cont ...

  7. ubuntu 12.04网络设置

    1.服务器版本 设置IP地址 ubuntu 12.04的网络设置文件是/etc/network/interfaces,打开文件,会看到 auto lo iface lo inet loopback 这 ...

  8. 【前端】display: box布局教程 [转]

    css display:box 新属性   一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 ...

  9. [BZOJ4552]排序

    Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...

  10. Spring mvc 字节流

    public static void responseDownloadFile(HttpServletRequest request, HttpServletResponse response, Fi ...