zoukankan      html  css  js  c++  java
  • CSS隐藏文字方法

    作为一个web前端开发
    为了html语义化
    常常要给内容模块加上一些标题来让页面更有意义
    当然还有我们的图片按钮
    在抛开css裸奔的情况下也能很顺利的汲取到页面信息
    通常为了传达更好的视觉效果
    我们常用图片替代掉字体
    而早前的前端开发常直接不在html中给出内容
    用 (甚至为空)
    这样在没有加载到css时就无法知道这个区块究竟是什么内容了

    正题开始
    通常偏移掉字体的方式是

    (1)
    使用text-indent:-9999px;


    可是他有一个局限性 他只适用于块级元素block
    而我们往往有时候想偏移掉的a上的字体
    所以问题就来了
    text-indent:-9999px;虽然用起来比较惬意
    将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
    如果正好这个a后面 是一个a按钮
    就要用float来浮动以使他身后再出现簇拥者
    这样是不是有些麻烦呢

    (2)
    line-height:0;
    font-size:0;
    overflow:hidden;


    能完美“隐藏”掉你background之上的字体
    经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

    (3)
    最方便的是加个span,然后display:none,而且这样不会出bug。
    遗憾的是,多了个标签,循环中使用的话,html又多了一堆字节,单个按钮推荐这样使用。


    而针对input value的隐藏这个方式就有些吃力了
    所以还是只能用block加text-indent来“偏移”模拟隐藏了
    display:block;
    font-size:0;
    line-height:0;
    text-indent:-9999px;
    经测试 ie6.0 、 7.0 、firefox 3.010 通过

  • 相关阅读:
    计算字符个数
    字符串最后一个单词的长度
    C++面试宝典
    给定三角形ABC和一点P(x,y,z),判断点P是否在ABC内,给出思路并手写代码
    N-皇后问题(N Queens)
    图着色算法详解(Graph Coloring)
    c++学习路线连接
    数据结构--经典排序算法
    5. 最长回文子串
    4. 寻找两个有序数组的中位数
  • 原文地址:https://www.cnblogs.com/load/p/2267200.html
Copyright © 2011-2022 走看看