从所有浏览器上的HTML按钮中删除文本？

Question

我们有许多尺寸和颜色的按钮，使用背景图像。背景图像本身有一个标签，但我们需要将HTML中的按钮文本保留为可用性/可访问性。如何使文本在所有浏览器中消失？

现代浏览器很简单，我刚刚使用 -

color: transparent;

我无法遵守Internet Explorer 7。我已经尝试过这些CSS属性，但没有一个可以完全删除文本而不会破坏我的网站布局。

font-size: 0px;
line-height: 0;
text-indent: -1000em; 
display: block;
padding-left: 1000px;

我非常感谢任何帮助。

Answer 1

就个人而言，我会采用所有CSS方法：

{ display: block;
text-indent: -9999em;
text-transform: uppercase; }

无论出于何种原因，text-transform: uppercase;为IE7做了诀窍。当然，您可能会拥有自己的CSS以及其他样式（如果需要）。

Answer 2

在某些情况下，您可以使用属性“content”来更改元素中包含的内容，个人认为我会使用javascript来执行此操作。

只需将空白文字写入元素即可。

Answer 3

如果按钮是输入提交按钮，请使用图像

<input type="image" src="/images/some_image.png" />

您可以使用CSS

设置此样式

input[type="image"] {
  border: 1px solid red;
  width: 150px;
  height: 35px;
}

如果它们是链接，Dave提供了答案。

Answer 4

  

如何让文字消失   所有的浏览器？

我希望你想要加载图像时altarnative文本消失。

对于这个puprpose你可以使用这个：

<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />

如果需要，您可以应用其他样式，但这个最小值将为您完成工作。

Answer 5

如果我正确理解了这个问题，这可能会有效（我现在没有IE7进行测试，所以不是100％肯定）

对于这样的标记：

<a href="javascript:return false;" class="button" id="buttonOK"><span
    class="icon">Ok</span></a>

使用此css：

span.icon {
    /*visibility: hidden;*/
    display:block;
    margin-left:-1000;
    width:100px;
}

或者这可能会有效，具体取决于您对可用性/可访问性的要求：

span.icon {
    visibility: hidden;
}

Answer 6

我不知道HTML中标签需要的用户/程序是什么，但是如果是用于文本浏览器等，也许你可以插入一个删除标签onLoad的JavaScript？

JQuery或Prototype会让这很容易。

Answer 7

除了你的

color: transparent;

您可以使用类似

的内容

padding-left: 3000px;
overflow: hidden;

此致