Question

我正在网站上工作，在顶部导航栏上有一个搜索框，我在搜索提交按钮上应用了以下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;
}

我的问题是在IE7文本缩进不起作用请帮助我如果您想查看演示，可以点击此处查看Click here。请帮帮我。

Answer 1

添加此CSS以使IE7运行：

text-transform: capitalize;

疯狂但真实。

Answer 2

在实现上述图像替换技术时，有一些规则可以使用css使其在IE浏览器上运行。

css声明：

text-indent:-9999px;
text-transform:capitalize;


font-size:0;
display:block;
line-height:0;

font-size：0 用于缩小字体大小，在IE7中运行良好。但即使在添加此行之后，您也会注意到IE6中按钮中心的黑线（基本上是文本）。

显示：阻止只有在添加此项时，否则文字缩进功能在IE中有效。

line-height：0 IE6的另一个修复。

text-transform：capitalize 我不知道包含该属性的确切原因，不知何故它解决了这个问题。

希望这有帮助。

Answer 3

.submit {
    line-height: 0px;
    font-size: 0px;
    /* restante do teu código */
    }

esteéummexemplo simse

Answer 4

如果没有其他方法可以正常工作，那么：

color: transparent;
text-indent: 0 !important; /* reset the old negative value */

因此，普通浏览器使用否定文本缩进，ie7使用conditional comments

进行特殊处理

Answer 5

只有以下人员才能为您完成工作：）

   text-indent:-9999px !important;  
   line-height:0;

Answer 6

在IE8中有类似的问题。在消除了所有其他可能性之后，CSS中其他地方的行高声明声明打破了文本缩进。解决方案：将行高显式设置为0。

Answer 7

text-transform：capitalize;实际上对我没有任何影响（它发生在标签上），但这有效

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden

Answer 8

我不知道这是否是你问题的原因，但我认为你的background简写符号是错误的;颜色代码应该在开头而不是结束。

Answer 9

对不起有点迟到了，但是正在寻找IE7问题的解决方案，带有负文本缩进。我开始尝试自己的随机方式，偶然发现了这一点。 jUst希望在Stack上发布它，以防它可以帮助其他人。

尝试向链接添加图标而不显示文字。

我的所有浏览器的CSS

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0;   width:18px; height:18px; 
       vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
    a.lnk_locked    { background-position: -1px -217px; }

我的CSS仅适用于IE7

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{  text-indent:20px; padding-left:-20px; width:18px;}

Answer 10

我只想添加“其他人”（即使它与主题没有严格关联而不是操作问题）。

请确保为您的值使用“px”。即-9999px不是-9999。

我花了10分钟试图调试为什么这不起作用。盯着我面前的价值。

我最近一直在做很多Silverlight，所以我的思想并没有足够快地转向CSS标记要求。哎呀。

您必须包含一个度量单位 ....否则它将无声地失败。

Answer 11

我在IE7中找到的文本缩进问题的解决方案，以及我觉得应该添加到此主题的内容如下：

不起作用：

text-indent: -900009px;

工作：

text-indent: -9999px;

我不知道有限制吗？我想有。

Answer 12

请勿使用text-indent。试试这个：

display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement

适用于所有浏览器，包括IE6。

Answer 13

我尝试了以上所有但没有成功。我必须在拾取文本缩进之前添加float:left。 IE7很疯狂，疯狂的我觉得很糟糕。

Answer 14

以下是我在IE中使用的一些CSS，它不依赖于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;
}

文本缩进在ie7中不起作用

14 个答案: