文本缩进在 ie7 中不起作用

发布于 2024-09-02 17:23:55 字数 480 浏览 14 评论 0原文

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

原文

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

#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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗失的美好 2024-09-09 17:23:56

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

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

因此普通浏览器使用负文本缩进，ie7 使用有条件的评论

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

回复收藏 0 原文

他夏了夏天 2024-09-09 17:23:56

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

回复收藏 0 原文

謸气贵蔟 2024-09-09 17:23:56

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

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

Only following will do the job for you :)

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

回复收藏 0 原文

栀子花开つ 2024-09-09 17:23:56

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

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

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

回复收藏 0 原文

梦与时光遇 2024-09-09 17:23:56

我不知道这是否是您问题的原因，但我认为您的 background 简写符号是错误的；颜色代码应该位于开头，而不是末尾。

回复收藏 0 原文

↙厌世 2024-09-09 17:23:56

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

Sorry a little late to the post, but was looking for a solution to the IE7 issue with negative text-indent. I started trying my own random ways and stumbled upon this. jUst wanted to post it out on Stack in case it may help others.

Trying to add an icon to a link and not show the text.

My CSS for all browsers

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; }

My CSS just for IE7

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

回复收藏 0 原文

謌踐踏愛綪 2024-09-09 17:23:56

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

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

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

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

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

回复收藏 0 原文

書生途 2024-09-09 17:23:56

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

不起作用：

text-indent: -900009px;

起作用：

text-indent: -9999px;

我不知道有限制？我想是有的。

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.

回复收藏 0 原文

森林散布 2024-09-09 17:23:56

不要使用文本缩进。试试这个：

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

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

Don't use text-indent. Try this one instead:

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.

回复收藏 0 原文

-黛色若梦 2024-09-09 17:23:56

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

回复收藏 0 原文

财迷小姐 2024-09-09 17:23:56

这是我正在使用的一些 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;
}

Here is some CSS I'm using that works for me in IE and doesn't rely on 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;
}

回复收藏 0 原文

浅浅淡淡 2024-09-09 17:23:55

添加此 CSS 以使 IE7 表现如下：

text-transform: capitalize;

疯狂但真实。

Add this CSS to make IE7 behave:

text-transform: capitalize;

Crazy but true.

回复收藏 0 原文

剧终人散尽 2024-09-09 17:23:55

在实现上述图像替换技术时，需要遵循一些规则来使用 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 我不知道包含该属性的确切原因，但它以某种方式解决了问题。

希望这有帮助。

while implementing the image replacement technique like above, there are some rules to go with css to get it work on IE browsers.

css declaration:

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


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

font-size:0 is 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.

display:block Negative text-indent works in IE only if this is added.

line-height:0 Another fix for IE6.

text-transform:capitalize I don't know the exact reason of including the property, somehow it fixes the issue.

Hope this helps.

回复收藏 0 原文

兔姬 2024-09-09 17:23:55

<代码>

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

<代码>
模拟的意义

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

este é um exemplo simse

回复收藏 0 原文

~没有更多了~

关于作者

亚希

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

文本缩进在 ie7 中不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

醉城メ夜风

远昼

平生欢

微凉

Honwey

qq_ikhFfg

友情链接

文本缩进在 ie7 中不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

醉城メ夜风

远昼

平生欢

微凉

Honwey

qq_ikhFfg

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。