文本缩进在 ie7 中不起作用

Posted

技术标签:

【中文标题】文本缩进在 ie7 中不起作用【英文标题】:Text indent is not working in 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 查看。请帮帮我。

【问题讨论】:

是文本转换:大写;正在工作:) 【参考方案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;

【讨论】:

以上是关于文本缩进在 ie7 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

默认值脚本在 IE7 中不起作用

:hover CSS 的伪类在 IE7 中不起作用

Fancybox 2,带表单的 iframe,在 IE7 中不起作用

缩进在 UITableView ( ios6 ) 中不起作用

过滤器:progid:DXImageTransform.Microsoft.gradient 在 ie7 中不起作用

此用于切换 div 的 JQuery 代码在 IE7 中不起作用,但在其他浏览器中起作用