25

我在一个网站上工作，在顶部导航栏上有一个搜索框，我在搜索提交按钮上应用了以下 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 中文本缩进不起作用，如果您想查看演示，请帮助我，您可以通过单击此处查看它。单击此处。请帮我。

4

14 回答 14

69

添加此 CSS 以使 IE7 运行：

text-transform: capitalize;

疯狂但真实。

于 2010-06-04T21:48:25.247 回答
20

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

CSS声明：

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


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

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

display:block Negative text-indent 仅在添加时才在 IE 中起作用。

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

text-transform:capitalize我不知道包含该属性的确切原因，它以某种方式解决了这个问题。

希望这可以帮助。

于 2011-05-30T08:36:41.280 回答
2 

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

este é um exemplo simse

于 2010-05-29T03:18:42.303 回答
1

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

于 2012-05-04T10:19:26.657 回答
1

如果没有其他方法完全正确，则可以：

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

所以普通浏览器使用负文本缩进，ie7 使用条件注释得到特殊处理

于 2012-01-05T18:01:26.357 回答
1

文本转换：大写；实际上对我没有影响（它发生在标签上），但这有效

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
于 2013-04-06T20:23:48.393 回答
1

只有以下才能为您完成这项工作:)

   text-indent:-9999px !important;  
   line-height:0;
于 2012-04-26T13:57:46.260 回答
0

我尝试了以上所有方法都没有成功。float:left我必须在它拾取文本缩进之前添加一个。IE7 很疯狂，我所说的疯狂是指糟糕透顶。

于 2012-09-24T14:22:33.707 回答
0

我只是想为“其他人”添加（即使它与主题并不严格相关，也不是操作问题）。

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

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

我最近做了很多 Silverlight，所以我的思绪没有足够快地转向 CSS 标记要求。嗯。

您必须包含一个度量单位....否则它只会默默地失败。

于 2011-10-07T01:00:19.337 回答
0

这是我在 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;
}
于 2013-03-01T11:56:31.740 回答
0

The solution that I found to my text-indent woes in IE7, and something that I feel should be added to this thread is the following:

Doesn't work:

text-indent: -900009px;

Does work:

text-indent: -9999px;

I didn't know there was a limit? I guess there is.

于 2011-12-05T12:12:55.287 回答
0

不要使用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。

于 2012-07-05T18:41:19.660 回答
0

抱歉，这篇文章有点晚了，但正在寻找一个解决 IE7 问题的方法，其中包含负文本缩进。我开始尝试自己的随机方式并偶然发现了这一点。只是想将其发布在 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;}
于 2011-07-11T19:36:34.153 回答
0

我不知道这是否是您问题的原因，但我认为您的background速记符号是错误的；颜色代码应该在开头，而不是结尾。

于 2010-05-22T14:21:36.537 回答