我遇到了这个奇怪的故障，在某些浏览器上，我的色样上出现了一个文本标签（显示它的名称）。这是一个屏幕录像来检查一下。在看到发生的事情后，很容易理解出了什么问题。对为什么在色样上显示标签感到困惑。任何帮助将非常感激。这是我用来显示色板的代码。
$colors: (
'color-Dark\ Grey\ Heather' #3E3C3D,
'color-Heather\ Deep\ Teal' #426275,
'color-Heather\ True\ Royal' #5F98E6,
);
@each $color in $colors {
$colorName: nth($color, 1);
$bgColor: nth($color, 2);
#ProductSelect-option-#{$colorName} + label {
background-color: $bgColor;
color: $bgColor;
width: 35px;
height: 35px;
overflow: hidden;
border-radius: 25px;
margin: 5px;
text-indent: 100%;
white-space: nowrap;
@if $colorName == Dark\ Grey\ Heather' or $colorName == 'color-
Heather\ Deep\ Teal' or $colorName == 'color-Heather\ True\ Royal {
background-image: url(my-heather-swatch-goes-here.png);
background-repeat: no-repeat;
background-size: 35px 35px;
}
}
#ProductSelect-option-#{$colorName}:checked + label {
border-color: #555;
border-width: 3px;
}
}
问题在于文本缩进，它应该隐藏文本，例如尝试将文本缩进从 100% 更改为 -2000px。
text-indent: -2000px;
还要确保您的元素/标签不是内联的，如果您可以分享此页面的实时网址，我们可以对其进行检查并提供更准确的答案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句