> css教程 > css >

safari浏览器css文字设置大大小一致,但是渲染显示的文字大小却不一致

来源:网络 文章列表 2018-12-29 8
通过设置-webkit-text-size-adjust的值为none来关闭safari或者chrome等浏览器默认的文字字体大小的自动调节功能和初始设置。

问题描述:

在IOS的Safari中,多行字体大小设置完全一致的文字。在显示上,有浮动的元素内文字更小普通的元素内文字更大
只在IOS下出现,Android以及Chrome模拟下不会出现该问题。

比如下面这些文字都是同样的font-size!!!

解决办法:

出现的这个问题一般都是在 IOS的safari浏览器上。

对于固定元素大小计算采用常规计算法,而外浮动元素的大小就要看内核的机制了,safari浏览器为了用户体验在计算的时候会根据容器的宽来做计算“适应”的字体大小,于是,你的代码中.item元素的内容长短不一,导致容器的宽不一致,部分产生了换行,导致浏览器做了不一样的缩放处理。

解决的办法很简单,就是关闭浏览器默认的自动调节文字大小的设置。简简单单一行代码就搞定了。

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

也可以设置-webkit-text-size-adjust的值为100%。当然上面的代码使用了 * 符号,表示所有元素都关闭自动调节文字大小功能,你可以在特定的某个元素,比如p 标签 或者某个 .item 的css 类进行设置。

p, .item{-webkit-text-size-adjust: 100%;}

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论