码迷,mamicode.com
首页 > Web开发 > 详细

-webkit-text-size-adjust: none;该如何处理

时间:2016-01-25 13:09:54      阅读:616      评论:0      收藏:0      [点我收藏+]

标签:

在中文版Chrome里面,网页CSS里所有小于12px的字体设置都无效,最终将显示12px。这样弄的本意可能

 

是好的,因为中文一旦小于12px,就变得不易阅读。

但中文版Chrome也会阅读英文网站啊!中文网页里面也会有英文的小字体设置需求啊!尤其是一些文字

 

部份的设计,不小实在不好看,影响整个排版的美观。

解决方案,添加一个私有属性到html选择器:

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

顾名思义, 禁用Webkit内核浏览器的文字大小调整功能。

 但是请注意以下几点

 

-webkit-text-size-adjust

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用  html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上会导致页面缩放失效

3、body会继承定义在html的样式

4、用-webkit-text-size-adjust不要定义成可继承的或全局的

举个例子:(来自https://m.taobao.com/)

技术分享
html {
    color: #000;
    background: #fff;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}
技术分享

这就是淘宝的使用 大家可以放心使用 

-webkit-text-size-adjust: none;该如何处理

标签:

原文地址:http://www.cnblogs.com/haiying520/p/5157032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!