在 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;
}
}
$wider-than-any-screen * $approximate-em-value; 难道不是比 -9999em 还要大的负值?为什么你会说它默认情况下不使用此方法?
$hide-text-direction 这个变量的默认值就是 left,所以这就是默认的条件分支啊。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。