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

  • 相关阅读:
    【nyoj-1274】信道安全(SPFA)
    【lightoj-1002】Country Roads(dijkstra变形)
    【牛客练习赛12-B】迷宫(BFS)
    【数论-逆元】复习总结
    【hdu1705】Count the grid(皮克定理)
    CSS 清除默认样式
    vue2.0项目实战使用axios发送请求
    axios基本用法
    vue2.0使用Sortable.js实现的拖拽功能
    vue2.0s中eventBus实现兄弟组件通信
  • 原文地址:https://www.cnblogs.com/lilaczhu/p/3804948.html
Copyright © 2011-2022 走看看