Html 文本缩进在 ie7 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2888298/
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 is not working in ie7
提问by user255631
I am working on a website and on the top navigation bar there is a search box, I applied the following css on the search submit button
我在一个网站上工作，顶部导航栏上有一个搜索框，我在搜索提交按钮上应用了以下 css
#submit {
background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
border:0 none;
cursor:pointer;
display:block;
height:21px;
padding:0;
position:absolute;
right:0;
text-indent:-9999px;
top:0;
width:20px;
z-index:2;
}
My Problem is in IE7 the text indent is not working please help me if you want to see the demo you can view it by clicking here Click here. Please help me.
我的问题是在 IE7 中，文本缩进不起作用，如果您想查看演示，请帮助我，您可以单击此处查看演示单击此处。请帮我。
回答by Kramer
Add this CSS to make IE7 behave:
添加此 CSS 以使 IE7 行为：
text-transform: capitalize;
Crazy but true.
疯狂但真实。
回答by Logesh Paul
while implementing the image replacement technique like above, there are some rules to go with css to get it work on IE browsers.
在实现像上面这样的图像替换技术时，有一些规则可以与 css 一起使用，以使其在 IE 浏览器上工作。
css declaration:
css声明：
text-indent:-9999px;
text-transform:capitalize;
font-size:0;
display:block;
line-height:0;
font-size:0is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.
font-size:0用于减小字体大小，在 IE7 中运行良好。但即使添加了这一行，您也会注意到 IE6 中按钮中心的一条黑线（基本上是文本）。
display:blockNegative text-indent works in IE only if this is added.
display:block负文本缩进仅在添加此项后才在 IE 中起作用。
line-height:0Another fix for IE6.
line-height:0IE6 的另一个修复。
text-transform:capitalizeI don't know the exact reason of including the property, somehow it fixes the issue.
text-transform:capitalize我不知道包含该属性的确切原因，但它以某种方式解决了问题。
Hope this helps.
希望这可以帮助。
回答by lerry
.submit {
line-height: 0px;
font-size: 0px;
/* restante do teu código */
}
este é um exemplo simse
este e um simse simse
回答by Horse
text-transform: capitalize; actually had no effect for me (it was happening on a tags), but this worked
文本转换：大写；实际上对我没有影响（它发生在标签上），但这有效
text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
回答by ori
If nothing else works exactly right, this does:
如果没有其他工作完全正确，则这样做：
color: transparent;
text-indent: 0 !important; /* reset the old negative value */
So normal browsers use the negative text-indent, ie7 gets special treatment using conditional comments
所以普通浏览器使用负文本缩进，ie7 使用条件注释得到特殊处理
回答by Somnath
Only following will do the job for you :)
只有以下才能为您完成工作:)
text-indent:-9999px !important;
line-height:0;
回答by Robin
Has a similar problem in IE8. After eliminating all other possibilities, a line-height declaration elsewhere in the CSS was breaking the text-indent. solution: set the line-height explicitly to 0.
在 IE8 中也有类似的问题。在排除所有其他可能性之后，CSS 中其他地方的行高声明破坏了文本缩进。解决方案：将 line-height 显式设置为 0。
回答by Igor Barbashin
Don't use text-indent. Try this one instead:
不要使用text-indent. 试试这个：
display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement
Works in all browsers including IE6.
适用于所有浏览器，包括 IE6。
回答by Mark
I tried all of the above with no success. I had to add a float:leftbefore it picked up the text indent. IE7 is crazy, and by crazy I mean awful.
我尝试了以上所有方法，但都没有成功。我必须float:left在它选择文本缩进之前添加一个。IE7 很疯狂，我所说的疯狂是指糟糕透顶。
回答by Dex
Here is some CSS I'm using that works for me in IE and doesn't rely on text-indent
这是我正在使用的一些 CSS，它们在 IE 中对我有用，并且不依赖 text-indent
.sprite {
width:100%;
height:0px;
padding-top:38px;
overflow:hidden;
background-repeat:no-repeat;
position:relative;
float:left;
display:block;
font-size:0px;
line-height:0px;
}
.sprite.twitter {
background-image:url(/images/social/twitter-sprite.png);
margin-top:8px;
background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
background-position: 4px -38px;
}
