代码片段 → CSS → 在 IE7 中移除按钮文本 在 IE7 中移除按钮文本 Chris Coyier 于 2009 年 9 月 2 日 HTML <input class="button" type="button" value="Go"> .. or .. <button class="button">Go</button> CSS input.button { text-indent: -9000px; text-transform: capitalize; } 不幸的是，仅使用负缩进无法从 IE7 中的按钮元素中移除文本，但添加 text-transform: capitalize; 即可解决问题！
感谢你的分享！我一直都在寻找一个在 IE7 中移除提交文本的解决方案，真是伤脑筋啊！
text-transform 确实有点奇怪，但毕竟是 IE 啊！再次感谢，Mark。
哇，Chris 又出手了。
之前我使用 line-height: -9999px 来解决这个问题，效果不错。
奇怪的是，在 IE 测试器中，这种方法对我失效了。我用 Google 搜索了一下
“remove text on buttons ie”
搜索结果第一页是谁呢？
非你莫属 :)
感谢 Chris!
你好
我使用的是
text-indent: -9000px; text-transform: capitalize;
在 IE7 中可以正常使用，但是鼠标悬停出现手的区域缩小了。我尝试过使用 width，但不起作用。
有解决方案吗？
... 以及 IE8。干得漂亮 - 谢谢！
{font-size: 0px; line-Height: 0px;}
效果相同
相反，{font-size: 0px; line-Height: 0px;} 会在按钮上留下一条很细的黑色线条，实际上就是文本缩小到了非常小的尺寸。
Chris Coyier 在这里发布的解决方案是我找到的唯一有效的解决方案。非常感谢，Chris！
我使用 padding-left 来移除按钮文本。效果完美
太棒了！非常感谢！
太棒了！非常感谢！
你拯救了我的生命！:D
阁下，您真是个天才！
这浏览器真是个混蛋。
绝对的杰作，我得说 - 非常感谢！
不错的修复... 非常感谢！
玩得漂亮！但如果你的浏览器宽度为 9000px 呢？ 开玩笑的！
我发现这在 IE7 中不起作用（更确切地说是 IE8 的“IE7 模式”）； text-transform 没有将按钮从屏幕外移回。
有效的做法是不要使用 text-indent 或 text-transform，而是使用
line-height: 100px;
font-size: 0px;
所以虽然 font-size 会在某些浏览器中在屏幕上留下很小的字母线条，但这行会被 line-height 偏移。（line-height 在 Firefox 中似乎不起作用，但 Firefox 似乎会尊重 font-size 为 0。使用更大的 line-height 来获得更大的图形。）
如果可以避免，永远不要使用 font-size: 0px;，因为某些辅助技术会完全忽略此文本（因此不知道你的按钮是干什么的）。此外，对于许多开发者/设计师来说，细小的字母线条是不可取的。
这为我省去了很多麻烦，谢谢！
太有帮助了！谢谢！
太不可思议了！非常感谢你发布这个解决方案 - IE 更像是巫术而不是编程！
letter-spacing:9999em; 与 text-indent 结合使用也行 :)
感谢 Ricardo，你的建议是我找到的唯一无需其他影响就能生效的方案。
哈哈！我不知道 text-transform: capitalize; 是怎么做到的，但它就像魔法一样有效。谢谢。
LOL，这真是太奇怪了。很棒。
所以，我使用了这些属性
font-size: 0px;
line-height: 0px
效果不错。
Rennan，我也尝试过这个方法，然后注意到在 Mac 上的 Safari 和 Firefox 中，我的背景图片移动了一个像素。如果你对像素精度要求很高，可能需要检查一下。:)
我知道我可以在这个地方找到答案！... 这一年我一直在寻找解决这个问题的愚蠢方法... 哈哈... 谢谢你 :)
感谢 Chris，效果完美！
感谢你的分享，它真的有效，帮我省下了一些“掉头发”的时间。
在 IE7 和 IE8 中效果很好 - 感谢 Chris！
这太疯狂了，但它确实有效。感谢分享。
这是我见过的最神奇的黑科技。阁下，您真是个传奇。
我更愿意称之为无关的失败 lol... 非常随机，但依然有效。
非常感谢你
哦，天哪。你是怎么想到这个方法的？:P
谢谢
哇... 真的。解决了我的 IE7 难题。谢谢。
嗯，小心点... 一些浏览器会根据你 text-indent 的距离创建水平滚动条。而且不是老旧的浏览器，第一个想到的就是 Opera 9.8。
一定要进行跨浏览器测试！
我简直不敢相信它竟然有效...
除了 inherit 和 none 之外，其他的都很好用。
也就是说，它并不总是有效。我目前正在与一个带有文本的提交按钮作斗争，该按钮会缩进，因此也会消失在页面外！
不过它在其他地方可以正常使用，所以我目前正在尝试找到差异。
我只想知道你是怎么想到这个解决方案的。
天才！
大家好。
尝试将负数更改为正数。
更改
text-intend: -9999px;
到
text-intend: 9999px;
看起来它有效。
非常感谢，效果很好：D
谢谢。
非常感谢您提供此修复程序！我完全不知道如何修复此问题，但此方法有效 :)
向您致敬！很棒的解决方案，非常感谢。
我非常喜欢这些代码片段！text-transform 确实，从未想到过会这样：P
按钮 {color = transparent>} 不够吗？^^
太棒了！已经为这个问题苦苦挣扎了5年。
怎么样
button { color : rgba(0,0,0,0); color : transparent; font-size : 0%; }我认为这可以达到相同的效果
是的，是的，是的，太棒了。谢谢克里斯！
有趣的是，我必须说我一直都在做网页并一直在网上进行研究，但只是在几个月前才偶然发现您的网站。
你猜怎么着，我非常喜欢它。感觉您也遇到了和大家一样的难题，但与仅包含理论的网站不同，您只是在分享您的经验，并附带具体的例子。
我一直不断地回来，回来，再回来，寻求更多信息。
非常棒的资源网站。非常感谢。
ps：您现在是我早晨的 RSS 阅读内容！
我很高兴这在 Google 搜索中出现了。对于一个令人烦恼的问题，如此简单的修复，谢谢！
以防万一对任何人都能有所帮助。{font-size: 0px; line-Height: 0px;} 是在处理 iPhone 3 和 3s 时电子邮件模板的绝佳解决方案。出于某种原因，它会在标题图像底部添加填充..
非常感谢您提供的信息，我还发现
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
font-size: 0;
display:block;
line-height: 0;
}
有效！
似乎也会隐藏您正在使用的任何背景图像。:( 有什么解决方法吗？
非常感谢分享这段代码…… :)
又一次在谷歌搜索中排名第一，真是太好了，克里斯！
非常喜欢这些简单的 CSS 代码片段……感谢您的帮助;-)
这简直是疯了！
真是太棒了！非常感谢您的修复！您究竟是如何想到这个方法的？
HTML5 样板现在使用以下方法隐藏文本，据报道在 IE7 中有效
查看尼古拉斯·加拉格尔的博客文章关于它
很奇怪，但它有效，非常感谢！
这让我挠头，说实话，解决方案也是这样，但如果它有效，那就有效。谢谢兄弟
还要在 text-indent 中添加“overflow: hidden”。应该可以。谢谢克里斯……
除非我遗漏了什么，否则解决方案似乎很简单。只需将输入值设置为空字符串，这样您一开始就没有文本
<input type=”submit” value=”” />
然后就大功告成了！
我在我的代码中使用这种方法。
我一直在使用这个技巧一段时间了。有时它最终不起作用，但我绝对喜欢将它保留在条件样式表中。使用 color:transparent 通常适用于现代浏览器。还没有尝试在按钮图像被推离页面时将缩进更改为正数，但我现在会尝试一下！
如果您关心可访问性，我不会从输入中取出值！
感谢您的所有建议！
谢谢克里斯，效果很好！
如此非直观的解决方案。这为我节省了很多时间。
对我来说不起作用。但我将其添加到我的 CSS 中，现在它像魅力一样工作了 :)
zoom:expression(
this.runtimeStyle.zoom=1,
this.value=”
);
当我们使用小写“go”时，它不能正常工作，它应该通过 CSS 转换为 Go，但没有转换。
这有点奇怪，但太棒了！谢谢 :)
这也适用于 IE 8+ 中的 IE 兼容性视图，该视图默认情况下对 Intranet 计算机启用。谢谢！