Question

我的网站的徽标通常在firefox中显示，但在Internet Explorer中，徽标显示在背景图片后面，看起来非常糟糕。有人能告诉我如何使徽标显示在背景图像的数量中吗？

Answer 1

你写了一些糟糕的CSS，所有的负边距是什么？我会远离那些东西，不知道为什么你的#navi也有120px的高度，（因此所有的-margins）。

仍然没有理由让IE在身体的背景图像后面放置一个徽标！这肯定很奇怪。

无论如何，这些变化会将徽标带回身体的神奇世界：

body {
    background-color: #CCFFFF;
    color: #000000; 
    font-family: Tahoma; 
    text-align: center;       
    background-image:url("images/bg.png");
    background-position: top left;
    background-repeat: repeat-x;

    /* changed */
    margin-top: 0;
}

#navi{
    width: 100%;
    background-color: transparent; 
    text-align: left;

    /* changed */
    margin-top: 3px;
    height: 20px;
}

#logo{
    height: 120px; 
    background-color: transparent; 
    margin-bottom: 70px; 
    /* changed */
    margin-top: 5px;
}

我确定你的其他元素需要调整，因为徽标和导航不再有很大的负边距。

Answer 2

摆脱所有古怪的*选择器，添加严格的DOCTYPE并再试一次。徽标不在背景之后，它在某处的屏幕外。

编辑：你有一个DOCTYPE，摆脱它上面的评论。 DOCTYPE必须在第一行。

Answer 3

尝试将徽标图像的z-index（CSS属性）设置为10。

在I.E.7-8背景图像后面出现的网站标志

3 个答案: