开发者社区> 问答> 正文

用图片背景代替文本时,为什么不推荐用 text-indent: -9999em?

在 Compass 看到 @mixin hide-text($direction) 的方法,默认情况不推荐使用负值的方式实现图片代替文本,这是为什么呢?

原文说明:
left is more robust, especially in older browsers. right seems have better runtime performance.
为什么用 right 性能会更好呢?

@mixin hide-text($direction: $hide-text-direction) {
  @if $direction == left {
    $approximate-em-value: 12px / 1em;
    $wider-than-any-screen: -9999em;
    text-indent: $wider-than-any-screen * $approximate-em-value;
    overflow: hidden;
    text-align: left;
  }
  @else {
    // slightly wider than the box prevents issues with inline-block elements
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
  }
  @include for-legacy-browsers((ie: "7"), $critical-usage-threshold) {
    //Text transform capitalize fixes text-replacement issue when used in a <button> element on ie7
    text-transform: capitalize;
  }
}

展开
收起
a123456678 2016-03-26 10:56:53 2732 0
1 条回答
写回答
取消 提交回答
  • $wider-than-any-screen * $approximate-em-value; 难道不是比 -9999em 还要大的负值?为什么你会说它默认情况下不使用此方法?

    $hide-text-direction 这个变量的默认值就是 left,所以这就是默认的条件分支啊。

    2019-07-17 19:15:45
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载