文本缩进在 ie7 中不起作用答案

【问题标题】：Text indent is not working in ie7文本缩进在 ie7 中不起作用
【发布时间】：2011-02-22 17:12:08
【问题描述】：

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

【问题讨论】：

是文本转换：大写；正在工作:)

标签： html css internet-explorer internet-explorer-7 text-indent

【解决方案1】：

添加此 CSS 以使 IE7 正常运行：

text-transform: capitalize;

疯狂但真实。

【讨论】：

很遗憾我们没有IE7的源代码，我们可能永远都不知道。
天啊。为什么我不惊讶
遗憾的是，这个错误仍然存在于 IE10 中。
@NickJosevski 根据 MS，它从 IE6 开始就受到支持。哈哈，我只能说。 msdn.microsoft.com/en-gb/library/hh781508%28v=vs.85%29.aspx
为什么这不是正确的答案？疯狂，这有效......但它确实有效！

【解决方案2】：

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

css 声明：

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


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

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

display:block 负文本缩进仅在添加后才能在 IE 中使用。

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

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

希望这会有所帮助。

【讨论】：

谢谢！在 Chrome 的 span 中，仅 text-indent 就足够了，但 Firefox 16 和 IE7 也需要 display:block。不需要其他任何人。

【解决方案3】：

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

este é um exemplo simse

【讨论】：

【解决方案4】：

如果没有其他方法完全正确，则这样做：

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

所以普通浏览器使用负文本缩进，ie7 使用conditional comments 得到特殊处理

【讨论】：

谢谢！这是唯一对我有用的解决方案。但是它也可以在不添加“text-indent：0”的情况下工作。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

抱歉，帖子有点晚了，但正在寻找解决 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;}

【讨论】：

我刚刚尝试将缩进负填充放在我的主样式表中，它似乎被 ie8 ie9 和 ff 接受。

【解决方案10】：

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

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

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

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

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

【讨论】：

【解决方案11】：

我在 IE7 中发现我的文本缩进问题的解决方案，我觉得应该添加到这个线程的解决方案如下：

不起作用：

text-indent: -900009px;

有效：

text-indent: -9999px;

我不知道有限制？我猜有。

【讨论】：

【解决方案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。

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案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;
}

【讨论】：