zoukankan      html  css  js  c++  java
  • font-size 兼容问题

    早年~


    楔子

    在为“我的抵扣券”添加  按钮时,为了将文字隐掉,给节点设置了“font-size:0;”,设置后刷一下浏览器,webkit下按钮掉下去了,而其他浏览器(包括IE6/7)都正常:

    按理说font-size设为0,文字就不占用空间了(事实上文字确实不显示了),为什么按钮反而掉下来了呢?如果将line-height也设为0呢?没用的,纹丝不动: 

    初步分析

    初步判断是font-size的问题,google了一下,看到下面这段话:

    带着三分怀疑+七分好奇,做了个简单的测试,设置每一段的font-size依次为18px、14px、12px、11px、8px、4px、0px,各浏览器下的展现如下:

    文艺浏览器(自作多情的chrome),font-size小于12px时均以12px显示:

    普通浏览器(safari、firefox、opera、IE8/9):

    2B浏览器(IE6/7),font-size为0时依然有内容:

    解决方法

    对于文艺的chrome,为其添加一个私有属性 {-webkit-text-size-adjust: none;} 即可解决小于12px的文字显示问题,下图是为8px行添加后的效果:

    对于2B的IE6/7,font-size为0时,通过常用隐藏文字的方式隐藏即可,下图是通过 { height:0;overflow:hidden;} 隐藏后的效果:

    更多……

    说了那么多,只是测试了font-size的兼容问题,并没有解决开篇提到的webkit下按钮掉下去的问题。好吧,那只是个引子,为font-size的出场做准备。至于那个问题,通过float或者vertical-align属性都可以解决,这里就不详述了~

    2012.12.5

  • 相关阅读:
    前段性能----详细渲染过程
    前段性能----repaint和reflow
    前段性能----缓存机制
    前段性能----带宽与延迟
    前端性能----从输入URL开始到返回数据的中间经历过程
    前端性能----TCP协议
    前端性能----CDN
    前端性能优化-学习链接,待持续更新
    前端性能----图像优化(图片)
    前端性能----静态资源,资源压缩
  • 原文地址:https://www.cnblogs.com/lilaczhu/p/3804948.html
Copyright © 2011-2022 走看看