Html {text-indent : -9999} 用于图像替换不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7723468/
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
{text-indent : -9999} for image replace not working
提问by ilyo
Any ideas why?
任何想法为什么？
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
}<a href="#" title="Edit" class="dashboard-edit">Edit</a>
<a href="#" title="Delete" class="dashboard-delete">Delete</a>回答by asumaran
Apart from the reason that text-indentdoesn't works on inline elements. another reason is if your element or one of its parent has been set with text-align:right
除了text-indent不适用于内联元素的原因。另一个原因是如果您的元素或其父元素之一已设置为text-align:right
So make sure your element has been set with text-align:leftto fix this.
因此，请确保您的元素已设置text-align:left为解决此问题。
回答by sandeep
text-indentdoes not work on inline elements and <a>is an inline element so you can define display:blockor display:inline-blockto your <a>tag.
text-indent不适用于内联元素并且<a>是内联元素，因此您可以定义display:block或添加display:inline-block到您的<a>标签。
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
display: inline-block;
}<a href="#" title="Edit" class="dashboard-edit">Edit</a>
<a href="#" title="Delete" class="dashboard-delete">Delete</a>回答by Bart Vangeneugden
<a/>tags are not 'blocks'
<a/>标签不是“块”
add the following:
添加以下内容：
display: inline-block;
回答by Janusz Skonieczny
In my case text indent was not working on H1 because of :before pseudo tag I used to correct a fixed header positioning problem
在我的情况下，文本缩进在 H1 上不起作用，因为 :before 伪标记我用来纠正固定的标题定位问题
.textpane h1:before, .textpane h2:before, .textpane h3:before {
display:block;
content:"";
height:90px;
margin:-90px 0 0;
}
This applied to H1 elements with negative indent hack showed text on top of the images in FF & Opera
这适用于具有负缩进的 H1 元素 hack 在 FF 和 Opera 中的图像顶部显示文本
回答by Gabriel Luethje
Keep in mind that (if you care) with inline-block the text-indent image replacement technique will fail in IE7. I recently had a heck of a time figuring that one out. I used this technique for IE7 and it works:
请记住（如果您关心）使用内联块文本缩进图像替换技术将在 IE7 中失败。我最近花了很长时间弄清楚这个问题。我在 IE7 中使用了这种技术并且它有效：
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
回答by Nader
I had same issue, I checked display and text-align. finally I find out.
我有同样的问题，我检查了显示和文本对齐。我终于知道了。
I was working on rtl design and in the theme the direction changed to rtl.
我正在研究 rtl 设计，并且在主题方向更改为 rtl。
You can change the container or each element to ltr to fix the issue.
您可以将容器或每个元素更改为 ltr 以解决问题。
dashboard-edit, .dashboard-delete {
direction: ltr;
}
