从所有浏览器上的 HTML 按钮中删除文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1726085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing text from HTML buttons on all browsers?
提问by Eric the Red
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
我们有使用背景图像的多种尺寸和颜色的按钮。背景图像本身有一个标签，但为了可用性/可访问性，我们需要将按钮的文本保留在 HTML 中。如何使文本在所有浏览器中消失？
Modern browsers are easy, I just used -
现代浏览器很简单，我只是用过 -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
我无法遵守 Internet Explorer 7。我已经尝试过这些 CSS 属性，但没有一个可以在不破坏我网站布局的情况下完全删除文本。
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
我将非常感谢任何帮助。
回答by Eric Guess
Personally, I go for the all CSS approach:
就个人而言，我采用所有 CSS 方法：
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase;does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
无论出于何种原因，text-transform: uppercase;IE7 的诀窍。当然，您可能会拥有自己的 CSS 以及用于其他样式的 CSS（如果需要）。
回答by David
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
在某些情况下，您可以使用属性“内容”来更改元素中包含的内容，尽管我个人会使用 javascript 来做到这一点。
Just write blank text into the element.
只需将空白文本写入元素。
回答by Richard Testani
If the button is an input submit button, use the image
如果按钮是输入提交按钮，则使用图像
<input type="image" src="/images/some_image.png" />
You can style this with CSS
您可以使用 CSS 设置样式
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
如果它们是链接，戴夫提供了答案。
回答by Manuel Iglesias
Additional to your
除了您的
color: transparent;
You can use something like
你可以使用类似的东西
padding-left: 3000px;
overflow: hidden;
Regards
问候
回答by Dmytrii Nagirniak
How do I make the text disappear in all browsers?
如何使文本在所有浏览器中消失？
I suppoose you want the altarnative text to disappear if the image is loaded.
我假设您希望在加载图像时替代文本消失。
For this puprpose you can use this:
为此目的，您可以使用：
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
如果需要，您可以应用其他样式，但此最低要求将为您完成这项工作。
回答by Upgradingdave
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
如果我正确理解了这个问题，这可能会起作用（我目前没有 IE7 可以测试，所以不是 100% 确定）
For markup like this:
对于这样的标记：
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
使用这个css：
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
或者这可能会起作用，具体取决于您对可用性/可访问性的要求：
span.icon {
visibility: hidden;
}
回答by Pekka
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
我不知道标签需要在 HTML 中用于哪些用户/程序，但是如果它用于文本浏览器等，也许您可以插入一个 JavaScript 来删除 onLoad 标签？
JQuery or Prototype would make that very easy.
JQuery 或 Prototype 将使这变得非常容易。
