位于p最开始的span设置text-indent影响p的整个第一行,反继承

今天遇到这个问题
描述起来也蛮麻烦的
搜也搜不到,所以问了群里的朋友,
感谢Robin还有$一揪就出来,
他俩对此问题进行了深入的讨论,
感谢他们细心解答,真相才得以水落石出。
最后本文采用了$一揪就出来的方法:

如下代码

  1. <style>
  2. span.imgblock{
  3.     height:16px;
  4.     width:16px;
  5.     display:inline-block;
  6.     background:#0099FF;
  7.     text-indent:5em;
  8.     overflow:hidden;
  9. }
  10. </style>
  11. <p><span class="imgblock">这里看不见,确可以复制到</span>选中前边的框子,然后复制吧。<br />你可以复制所有本文<p>

给最开始的span设置了text-indent属性之后,导致了整个父元素p的text-indent属性
IE6/7都确认有这个bug,可以说是一种反继承。

解决的方法是多一个标签,避开问题多多的text-indent,
设置内层标签的行高,以及padding-left。就能够大致解决问题了。
即保证了效果,也保证了文本的不丢失,为残障人士,搜索引擎,以及想要复制文章的人给予方便。
至少可以不用空格了,使用空格虽然可以轻松达到效果,无需使用text-indent了,但这显然不好。

  1. <style>
  2. span.imgblock{
  3.     height:16px;
  4.     width:16px;
  5.     display:inline-block;
  6.     background:#0099FF;
  7.     overflow:hidden;
  8. }
  9. strong.aaa{
  10.     display:inline-block;
  11.     padding-left:2000px;
  12. }
  13. </style>
  14. <p><span class="imgblock"><strong class="aaa">这里看不见,确可以复制到。</strong></span>选中前边的框子,然后复制吧<br />你可以复制所有本文<p>
This entry was posted in CSS. Bookmark the permalink.

3 Responses to 位于p最开始的span设置text-indent影响p的整个第一行,反继承

  1. 小球 says:

    如果对Object.prototype扩展方法,jQuery会自动调用,请问有办法解决吗?例如:

  2. 黑米张 says:

    这样不行?

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>