Question

我正在处理http://companies.ur-nl.com/似乎Logo （标题中的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;
}

Answer 1

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

但是，我无法让solution该问题在您的网站上运行。相反，您可以删除text-indent并替换为：

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

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

来源：Solved: IE7 Negative Text-Indent CSS Bug

Answer 2

将此添加到您的css

#logo a{display:block;}

Answer 3

定义此css

#logo a{
display:inline-block;  // remove this line
display:block;  // add this line
}

Answer 4

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

如果由于某种原因你绝对需要logo容器中的锚点作为主要浏览器的内联块元素，你可以保留display: inline-block规则并为IE7添加一个hack：

#logo a {
    display: inline-block;
    *display: block;
}

LOGO图像未在IE7中的标题内呈现

4 个答案: