zoukankan      html  css  js  c++  java
  • textindent:9999px隐藏文字为何失效?

    用背景background来显示图片,需要隐藏文字,设置text-indent:-9999px;为何没有效果?

    <div class="remksz msstar" title="good">abcdefghi</div>

    css:

    .remksz {height:12px;width:64px;display:inline; margin-right:10px; text-indent:-9999px; vertical-align:middle;}
    .msstar 
    {background:transparent url(images/remark.gif) no-repeat scroll 0 -84px;}

    原来问题出在display:inline;上,Text-indent 仅仅对 block, table cells, inline block才有效果,而且text-align:left;才有效果。对inline的元素没有效果。

    改为display:inline-block;问题解决。

    可惜浏览器对inline-block的支持不好,Firefox3,IE8支持,Opera、Safari也支持,其他的就不支持了。

    IE6. IE7下使用貌似会有些效果,但其实使用display:inline-block在IE下会触发layout(如果你对layout感觉到陌生,可以参看old9翻译的《On having layout》),从而使内联元素拥有了display:inline-block属性的表征。inline-block是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

  • 相关阅读:
    vue 文件分段上传
    深度clone
    js 导出excel
    js 校验
    设计模式原则
    多态
    数据库sql
    Redis快速入门
    C#中使用Redis学习二 在.NET4.5中使用redis hash操作
    在c#中使用servicestackredis操作redis
  • 原文地址:https://www.cnblogs.com/Mainz/p/text_indent_css_inline_block.html
Copyright © 2011-2022 走看看