问题描述:

  页面宽度有限的情况下显示大数据,采用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. 001-netty的优势

    1.API简单. 2.性能高. 3.成熟稳定. 4.入门门槛低.

  2. CGlib和JDK动态代理

    一.CGlib动态代理     JDK实现动态代理需要实现类通过接口定义业务方法,对于没有接口的类,如何实现动态代理呢,这就需要CGLib了.CGLib采用了非常底层的1:字节码技术,其原理是通过字节 ...

  3. Selenium+Python定位实例

    常见的定位方式参见:http://www.cnblogs.com/ranxf/p/7928732.html 1.ID定位(find_element_by_id) <input class=&qu ...

  4. svn不提交.net项目中的bin

    1 选中 bin->右击->tortoiseSVN->add to ignore list->选择第二个 2 提交 , 服务器上就没有bin目录了.

  5. Linux学习笔记之CentOS6.9 防火墙的关闭以及开启

    有的时候,我们需要对系统的防火墙进行操作,今天小编就给大家讲解一下如何开启以及关闭CentOS6.9系统下的防火墙. 输入:cat /etc/issue   查看版本 (一)通过service命令 s ...

  6. 解决Linux 下server和client 通过TCP通讯:accept成功接收却报错的问题

    今天在写简单的TCP通讯例子的时候,遇到了一个问题:server 和client能够连接成功,并且client也能够正常发送,但server就是接收不到,在网上搜索一番后,终于解决了问题.在这里整理如 ...

  7. Django----Request对象&Response对象

    Django 使用Request 对象和Response 对象在系统间传递状态. HttpRequest 对象: Request.body:一个字节字符串,表示原始HTTP 请求的正文.它对于处理非H ...

  8. Commons Configuration之三Properties文件

    转载自(https://my.oschina.net/u/2000201/blog/486653) Properties文件是流行的应用程序配置文件.当然,Commons Configuration支 ...

  9. Linux系统巡检项目

    系统检测 1.检查系统类型 2.检查发行版本 3.检查内核版本 4.检查主机名称 5.检查是否启用SElinux 6.检测默认的语言/编码 7.检测uptime 8.检测最后启动时间等 CPU检查 1 ...

  10. mySQL 多表查询语句

    多表查询最少有2张以上的表一起查询 交叉连接查询(很少用)查询出来的数据是错误的 内连接 [inner] join on 隐式省略inner join on select  from 表A,表B wh ...