【css】怎么让Chrome支持小于12px 的文字
谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响。
CSS样式定义如下:
-webkit-text-size-adjust:none;
但是在最新版的谷歌里。已经不在支持这个属性啦,需要通过css3的transform来解决,方法如下:
| css部分 | html布局 |
|
body,p{ margin:0; padding:0;} |
<p><span id="span1">我是一个小于12PX的字体</span></p> |
解释:
1.{webkit-transform:scale(0.8); display:inline-block} //0.8位缩放倍数,具体自己根据实际需求修改,只能缩放可以定义宽高的元素,而span是行内元素,
为什么定义 display:inline-block而不是 display:block?转为block就独占一行啦,所以转换为inline-block
2.{-o-transform:scale(1);}opera现在最新版也是webkit内核,新版本的opera,本来就是10px的字体了。
作者:smile.轉角
QQ:493177502
【css】怎么让Chrome支持小于12px 的文字的更多相关文章
- 使用css怎么让谷歌支持小于12px的文字比如10px
1.小于12px的字体,如果内容固定,可以将内容切除做图片,没有兼容问题. 2.-webkit-text-size-adjust:none;老版本谷歌,27版本之后无用 3.-webkit-trans ...
- 让谷歌浏览器 chrome 支持小于12px的字体
webkit的私有属性:{-webkit-text-size-adjust:none;} 但是,在最新版的谷歌里.已经不在支持这个属性啦. 用css3的transform:scale()缩放大小,但是 ...
- 解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
在最新版的谷歌里.已经不在支持这个属性啦 谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即 可实现字体大小不随终端设 ...
- CSS3 - chrome,傲游,360极速浏览器不支持小于12px的字号的解决办法
google流量器chrome,傲游,360极速浏览器都是基于webkit内核浏览器,默认不支持小于font-size小于12px 的字号,即定义font-size小于12px时会发现字体大小依然是1 ...
- [Chrome](CSS) 解决Chrome font-size 小于 12px 无效
Chrome中 font-size 小于 12px 会失效. 解决的办法一种是: -webkit-text-size-adjust:none; (但是Chrome27之后取消了支持) 利用CSS3的缩 ...
- 解决CSS小于12px的文字在谷歌浏览器显示问题
做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...
- 如何让谷歌浏览器支持小于12px的字体
CSS3有个新的属性transform,而我们用到的就是transform:scale() 书写一段代码 <body> <p>我是一个小于12PX的字体</p> & ...
- 谷歌浏览器支持小于12px的字体
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Google不支持小于12px字体 终极办法
每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员. 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸). 2.探索 2.1 CSS HAC ...
随机推荐
- HTTP与HTTPs的区别?
简而言之: HTTPS = HTTP + SSL HTTP 的 URL 以 http:// 开头,而 HTTPS 的 URL 以 https:// 开头 HTTP 是不安全的,而 HTTPS 是安 ...
- Java自动内存管理机制学习(二):垃圾回收器与内存分配策略
备注:本文引自<深入理解Java虚拟机第二版>仅供参考 图片来自:http://csdn.net/WSYW126 垃圾收集器与内存分配策略 概述 GC要完成3件事: 哪些内存需要回收? 什 ...
- CSS3布局之box-flex的使用
语法: box-flex:<number> 其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例.设置或检索伸缩盒对象的子元素如何分配其剩余空间.(伸缩盒最老版本) htm ...
- 洛谷P4492 [HAOI2018]苹果树(组合数)
题意 题目链接 Sol 有点自闭,.我好像对组合数一窍不通(~~~~) Orz shadowice // luogu-judger-enable-o2 #include<bits/stdc++. ...
- maven将依赖依赖打包到jar中
通过maven-assembly-plugin插件可以实现将依赖jar包打包到自己的jar包中的需求,只需要在pom.xml中配置该插件即可,配置如下: <build> <plugi ...
- 快速开发跨平台应用之Xamarin技术
Xamarin 介绍 Xamarin 是一个允许开发人员有效创建可跨 iOS.Android.Windows 应用程序的开发工具集.Xamarin是免费且开源的,遵循 MIT (麻省理工学院许可证)协 ...
- (网页)html5 canvas清空画布方法(转)
总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() { v ...
- 使用VSTS的Git进行版本控制(四)——在Visual Studio中管理分支
使用VSTS的Git进行版本控制(四)--在Visual Studio中管理分支 可以从web版Team Services Git repo 的Branches视图中管理工作.定制视图来跟踪最关注的分 ...
- VMware虚拟机安装CentOS系统图文教程
上一篇:VMware虚拟机安装教程详解图文 上一篇文章给大家介绍了虚拟机的安装,本文为大家详细介绍一下如何在虚拟机安装CentOS系统: 一:VMware虚拟机创建: 1:打开 ...
- 关于正餐智能POS6.0.1.1改版后,点击反结账进入点菜界面后无法进行加菜的FAQ
适用版本:智能POS正餐V6.0.1.1+适用情况:点击反结账进入点菜界面后无法进行加菜.原因:为让报表统计的数据更准确解决方案:1.点击反结账,输入用户密码,进入点菜界面. 2.点击结算,进入收银台 ...