H1 图像替换出现在除 ie 之外的所有浏览器中？答案

【问题标题】：H1 image replacement shows up in every browser except ie?H1 图像替换出现在除 ie 之外的所有浏览器中？
【发布时间】：2012-10-18 15:30:59
【问题描述】：

我已经设法通过 css 图像替换让我的标题作为 ff、safari 和 opera 中的链接工作

#header h1 {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    margin-left: 15px;
}
#header h1 a {
    display: block;
    height: 120px;
    width: 400px;
    margin-top: -135px;
}

我正在尝试在 IE 中优化该网站，这是我在周一启动它之前的最后一步，但徽标在 IE 8 或 9 中根本没有出现，但在 IE 7 中却非常令人惊讶。我通过使显示内联块设法使徽标出现在 IE9 中

.ie9 #header h1 {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    margin-left: 15px;
}

.ie9 #header h1 a {
    display: inline-block;
    height: 120px;
    width: 400px;
    margin-top: -135px;
}

当我这样做时，图像不再是链接，有人知道如何解决这个问题吗？我会将图像放在 HTML 中，而不是使用图像替换，但从 SEO 的角度来看，使用图像替换更好。

【问题讨论】：

你能在 jsFiddle 或你的网站上发布一些东西吗？
尽量避免在 IE 中出现负边距。如果可能，请使用position: relative; top: -135px;。
太棒了，谢谢，我首先尝试了相对位置，但它并没有完全按照我想要的方式工作，所以我将其更改为绝对，现在它可以完美运行了，谢谢 :)

标签： html css graphical-logo image-replacement

【解决方案1】：

我认为是margin-top: -135px 导致了问题。高度只有 120 像素，所以它最终会是 -15 像素（高度 - 边距），因此会消失在 H1 标记的底部下方。

【讨论】：

谢谢 :) 我使用了 position: absolute, top: 0, left: 0 并且现在可以完美运行