-3

我正在处理http://companies.ur-nl.com/似乎标头中的徽标（其 H1）图像未在 IE7 中呈现，它适用于 FF 和其他浏览器，请帮我解决这个问题

HTML

    <div id='logo'>
      <h1>
         <a href='/' title='Some Text HERE'>
           Some Text HERE
         </a>
      </h1>
   </div>

CSS

#logo {
    float: left;
}
#logo a {
    background: url("http://companies.ur-nl.com/assets/logo_image_name.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 62px;
    margin: 35px 0 0;
    text-indent: -100000px;
    width: 195px;
}
4

4 回答 4

2

这是 IE7 的一个众所周知的文本缩进错误，例如参见Text indent is not working in ie7

但是，我无法在您的网站上找到该问题的解决方案。相反，您可以删除text-indent并替换为：

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

这似乎在我测试过的 Chrome30、IE7 和 IE9 浏览器中运行良好。

来源：已解决：IE7 Negative Text-Indent CSS Bug

于 2013-07-30T08:02:24.903 回答
0

定义这个 css

#logo a{
display:inline-block;  // remove this line
display:block;  // add this line
}
于 2013-07-30T07:05:49.627 回答
0

这是因为 IE7 不完全支持 inline-block 属性。

如果出于某种原因，您绝对需要将徽标容器内的锚点作为主要浏览器的内联块元素，您可以保留display: inline-block规则并为 IE7 添加一个 hack，如下所示：

#logo a {
    display: inline-block;
    *display: block;
}
于 2013-07-30T07:54:01.680 回答
0

将此添加到您的CSS

#logo a{display:block;}
于 2013-07-30T07:04:30.290 回答