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

问题描述：

在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%;}