IE8中的颜色透明？答案

【问题标题】：color transparent in IE8?IE8中的颜色透明？
【发布时间】：2013-09-22 11:17:44
【问题描述】：

尝试让 color:transparent 在 IE8 中工作让我有点头疼。

基本上，我有这些按钮，可以是锚点或输入元素：

<input type="submit" class="button" value="Click me" />
<a class="button" href="SOME_URL">Click me</a>

单击时，这些按钮被赋予loading 类，为它们提供一个微调器 gif 作为背景图像，并设置color:transparent 使文本不可见，显示微调器。这使得按钮在显示微调器 gif 时单击时保持相同大小。

但是，IE8 不支持 color:transparent，我无法想出另一种选择。

在这种情况下，使用font-size:0、line-height:0、text-indent:-9999 或类似的东西是不好的，因为这样就无法保持按钮的大小。

如果可能，我想用 CSS 解决这个问题，所以请不要浪费时间发布 JavaScript 解决方案。

也许可以为“颜色”设置过滤器，比如下面的渐变和“不透明度”，但我还没有找到方法。

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#ffffff');
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

感谢任何输入！

【问题讨论】：

标签： css text colors internet-explorer-8 transparent

【解决方案1】：

IE8 不理解 rgba 属性，所以这不是一个好的答案。我会尝试使用visibility:hidden IE8 明白这一点。这样一来，文本仍然占据同一个房间，只是被隐藏了。

【讨论】：

这将隐藏整个按钮，而不仅仅是文本。
@Henrik 我意识到这不适用于您的input。我想知道为什么 line-height 或 text-indent 对你不起作用？您没有在 CSS 中指定按钮的大小吗？
不，我没有指定按钮的大小，因为它们可以包含来自许多不同语言的文本 - 因此不能是固定宽度。
好的，这就是为什么line-height 等对你不起作用的原因。我不确定你是否可以做一个纯 CSS 解决方案。使用原始问题中的过滤器，您可以添加 00 以获得透明度。我只是不确定您是否可以定位按钮文本。 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', EndColorStr='#00ffffff'); 另外，你有没有理由避免使用 JS？只是好奇。
好吧，我可以使用 JavaScript 来获得我想要的结果——而且我可能会（因为这似乎是一个死胡同）。然而，出于原则，我尝试尽可能少地使用 JavaScript 做与样式相关的事情 - 理想情况下，只要样式应该根据用户交互发生变化，只需向父元素添加一个新类。我认为这种方法可以使代码更简洁，更易于维护。