今天，群里有人问道font-size<12 chrome不支持的问题。说实话，这个我一直都没留意过，正好借个机会给自己补习一下。

自己亲自试过，确实如此，当font-size<12 chrome都当12px处理了，据说以前有个属性可以用，不过已经淘汰不支持了，也无法验证，那这里就不说了。这里用的方法是用css3的新属性：transform:scale();来达到对文本进行缩放，但是注意，他会对做用的元素进行整体缩放，而这不是我们所希望的，因为我们只是想单独缩放字体，所以采取一些措施：就是用一个标签把需要缩放的文本包起来，然后单独对他添加transform:scale();避免对其他元素影响。好了，说了这么多，看代码：

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <title>JS Bin</title>

 </head>

 <body>

   <div style="font-size:16px">Font Size 16px</div>

 <div style="font-size:15px">Font Size 15px</div>

 <div style="font-size:14px">Font Size 14px</div>

 <div style="font-size:13px">Font Size 13px</div>

 <div style="font-size:12px">Font Size 12px</div>

   <div style="font-size:11px" class="small">Font Size 11px</div>

 <div style="font-size:10px;border:1px solid red;" class="">Font Size 10px</div>

 <div style="font-size:9px" class="small">Font Size 9px</div>

 <div style="font-size:8px;border:1px solid green;"><span  class="small2">Font Size 8px</span></div>

 <div style="font-size:7px;border:1px solid blue;"><span class="small">Font Size 7px</span><a href="#">baidu.com</a></div>

 <div style="font-size:6px;border:1px solid blue;"><p class="small">Font Size 6px</p></div>

 </body>

 </html>

这是样式：

 .small,.small2{-webkit-transform:scale(0.8);margin:;padding:;border:1px solid red;}

 span.small{display:inline-block;}

这是结果：

由上面结果可以看出，当给整个div添加small类的时候，红框的区域相比font-size：10px的红框是有缩小的，这说明整个div所有样式尺寸都缩小的0.8，而不单单是font-size

再看font-size：8px貌似不起作用，没错，因为他用了small2的类名，而这个没有display：inline-block;所以得出结论，这里scale是失效的。理解起来也很容易，scale本就是对尺寸的元素进行缩放，而span是内联元素，没有尺寸，自然不起作用失效。为什么用display：inline-block，我想找个就不需要多解释了。

当然，对比看font-size:6px可以看出，不是只有span可以用来包含需要缩放文本的标签，p标签也是可以的，这里就省去让他块化的一步了

参考：http://www.w3ci.com/front/xHTMLCSS/34.html

font-size<12 chrome不支持解决的更多相关文章

  1. 谷歌浏览器Chrome不再支持showModalDialog的解决办法

    问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7   var obj = new Object();   var retval = window.showModalDia ...

  2. Chrome不支持本地Ajax请求解决？

    今天用JQuery操作Ajax时,使用load方法加载html块 结果提示: XMLHttpRequest cannot load file~~~~~~~Origin 'null' is theref ...

  3. Chrome不支持本地Ajax请求，解决办法

    Chrome不支持本地Ajax请求,当我在.html文件中访问.json文件时就会出现这个问题,就是说这个时候不能加载这个.html文件. 解决方式 打开Chrome快捷方式的属性中设置: 右击Chr ...

  4. 未在本地计算机上注册"microsoft.ACE.oledb.12.0"提供程序解决办法

    错误信息:未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序. 解决办法: 去http://download.microsoft.com/download/7/0/3/7 ...

  5. linux又一次编译安装gd，添加freetype支持,解决验证码不显示问题，Fatal error: Call to undefined function imagettftext()

    问题: Fatal error: Call to undefined function Think\imagettftext() in /var/www/webreg/ThinkPHP/Library ...

  6. 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序解决办法

    一.未在本地计算机上注册“microsoft.ACE.oledb.4.0”提供程序 http://download.microsoft.com/download/7/0/3/703ffbcb-dc0c ...

  7. 高版本Chrome不支持showModalDialog

    高版本Chrome不支持window.showModalDialog,可用window.open代替 var url = "https://www.baidu.com"; var ...

  8. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  9. chrome不支持embed标签解决方案

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

随机推荐

  1. [转]Servlet的load-on-startup

      在servlet的配置当中,<load-on-startup>5</load-on-startup>的含义是: 标记容器是否在启动的时候就加载这个servlet. 当值为0 ...

  2. linux shell实现随机数多种方法（date,random,uuid)

    参考: http://www.cnblogs.com/chengmo/archive/2010/10/23/1858879.html $ cat /proc/sys/kernel/random/uui ...

  3. .Net中的7Zip——Sharpcompress

    虽然微软在.net 4.5中集成了对zip的解压支持,但还是比较弱.如果我们想让程序像7zip那样支持万能解压,Sharpcompress可以帮你实现这个目标,它是一个C#写的压缩/解压工具,虽然还没 ...

  4. nodejs第一个练习：用Node.js建HTTP服务器

    这是官方的一个例子, 在F盘建立一个tinyphp.js文件,内容: var http = require('http'); http.createServer(function (req, res) ...

  5. appium+python自动化46-安装app三种方式

    前言 adb安装 1.在app自动化之前,首先手机上有要被测试的app,如何把电脑本地上的app安装到手机上呢?可以在运行自动化代码前,在cmd输入adb指令,把电脑app安装到手机上 adb ins ...

  6. 初始加载时edittext不自动获取焦点的方法

    在做一个搜索功能时,刚进入界面,edittext直接自动获取焦点,这显然不是我想要的. 那么问题来了:如何关闭EditText自动获取焦点的? 尝试了好几个方法,在Java代码添加focus控制,在x ...

  7. 关于使用Android新版Camera即Camera2的使用介绍 暨解决Camera.PreviewCallback和MediaRecorder无法同时进行

    新的相机API也就是Camera2是在Android 5.0引进的.通常情况下,我们都是使用Android旧的相机API,纵然在Android Studio里老是提示已经废弃,但是只要都能用,也就没必 ...

  8. C++中模块(Dll)对外暴露接口的方式

    总结下C++中模块(Dll)对外暴露接口的方式: (1)导出API函数的方式这种方式是Windows中调用DLL接口的最基本方式,GDI32.dll, User32.dll都是用这种方式对外暴露系统A ...

  9. http://my.oschina.net/u/1177710/blog/284608

    http://my.oschina.net/u/1177710/blog/284608 http://chuhanzhi.com/?p=45 http://www.2cto.com/kf/201501 ...

  10. [Python爬虫] 之二十九：Selenium +phantomjs 利用 pyquery抓取节目信息信息

    一.介绍 本例子用Selenium +phantomjs爬取节目(http://tv.cctv.com/epg/index.shtml?date=2018-03-25)的信息 二.网站信息 三.数据抓 ...