css overflow与text-indent:-999em 字体隐藏
发布时间：2010-03-18 09:49:12 作者：佚名 
我要评论
我要评论css overflow与text-indent:-999em 字体隐藏,需要的朋友可以参考下。
作为一个web前端开发
为了html语义化
常常要给内容模块加上一些标题来让页面更有意义
当然还有我们的图片按钮
在抛开css裸奔的情况下也能很顺利的汲取到页面信息
通常为了传达更好的视觉效果
我们常用图片替代掉字体
而早前的前端开发常直接不在html中给出内容
用 ;(甚至为空)
这样在没有加载到css时就无法知道这个区块究竟是什么内容了
正题开始
通常偏移掉字体的方式是
使用text-indent:-9999px;
可是他有一个局限性 他只适用于块级元素block
而我们往往有时候想偏移掉的a上的字体
所以问题就来了
text-indent:-9999px;虽然用起来比较惬意
将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者
这样是不是有些麻烦呢
所以推荐使用
复制代码
代码如下:line-height:0;
font-size:0;
overflow:hidden;
能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过
而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来“偏移”模拟隐藏了
复制代码
代码如下:display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过
相关文章
- 当块元素想呈现该元素内部内容不换行或者超过该元素的部分隐藏起来2010-03-05
标题长度溢出时，自动显示为省略“...”的Css text-overflow
内容超出后自动隐藏并加省略标记(...)引号的Css text-overflow:ellipsis; o...2011-07-27CSS:用overflow代替left截取指定长度字符串-CSS教程-网页制作-网页教学
为了防止文章标题过长超过容器(td,div)宽度而显示成多行，我们通常要对标题进行处理让其显示在一行，通常使用的方法有两种：一种方法是在客户端用CSS设置容器的overflow属2008-10-17CSS教程:导致一些问题的overflow-CSS教程-网页制作-网页教学网
overflow有问题吗？没问题。那为什么说要慎用呢？因为有时会导致一些问题。。。 关于overflow:auto的，很多人贪他书写方便，直接用来清除浮动。但是Firefox使用overflow:au2008-10-17css overflow溢出隐藏(文字溢出时的自动隐藏处理)
css溢出隐藏一般用于当内容太大以至于无法适应指定的区域时，通过设置css下的overflow属性来隐藏其内容2013-03-07标签增加CSS的overflow属性来清除浮动-CSS教程-网页制作-网页教学网
这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。2008-10-17- 网页制作Webjx文章简介：文字隐藏应用广泛，但常用的方法没有什么亲和力。 文字隐藏应用广泛，但常用的方法没有什么亲和力。 常用文字隐藏方法的缺陷：2009-04-02
CSS--overflow:hidden在项目实例中使用心得分享
大家对CSS属性中overflow:hidden并不陌生，至于它的应用，在下文中列出我在项目中，运用到此属性的例子，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-04css中position:relative和overflow:hidden之间的问题
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成2013-09-04CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右，上下都滚动。怎么设置只上下滚动而不左右滚动，下面有个不错的解决方法，感兴趣的朋友可以参考下2013-10-12
最新评论