文本缩进在 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 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Fancybox 2,带表单的 iframe,在 IE7 中不起作用
缩进在 UITableView ( ios6 ) 中不起作用