IE8中如何设置透明背景色？

Question

我因为试图让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解决方案。

也许可以为“color”设置滤镜，就像下面的渐变和“opacity”一样，但我还没有找到方法。

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

任何意见都受到欢迎！

- Henrik Janbell

Answer 1

IE8不支持rgba属性，因此这不是一个好的解决方案。我建议尝试使用visibility:hidden，IE8可以理解它。这样，文本仍然占用相同的空间，只是隐藏了。

- disinfor

---

这将隐藏整个按钮，而不仅仅是文本。 - Henrik Janbell

@Henrik 我意识到这对你的“输入”不起作用。我想知道为什么line-height或text-indent对你不起作用？你没有在CSS中指定按钮的大小吗？ - disinfor

不，我没有指定按钮的大小，因为它们可以包含许多不同语言的文本 - 因此不能是固定宽度。 - Henrik Janbell

好的，这就解释了为什么 line-height 等属性对你不起作用。我不确定你是否可以使用纯 CSS 解决方案。根据你在原始问题中提供的筛选器，你可以添加 00 来获取透明度。只是我不确定你能否针对按钮文本进行操作。filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', EndColorStr='#00ffffff');另外，你避免使用 JS 的原因是什么？只是好奇。 - disinfor

好的，我可以使用JavaScript来获得我想要的结果 - 而且我可能会这样做（因为这似乎是一个死胡同）。然而，出于原则，我尽量避免使用JavaScript与样式相关的内容 - 理想情况下，只需在用户交互时向父元素添加一个新类即可更改样式。我认为这种方法可以产生更清晰、更易于维护的代码。 - Henrik Janbell

如果你不必迎合 IE8 :) 我为你编写了一个小的 JQuery 脚本，它将删除按钮的 value。它会保持原始的 height 和 width，因此无论语言如何，按钮都保持相同的大小。http://jsfiddle.net/9vEQT/2/祝好运!! - disinfor