Internet Explorer不显示图像

Question

我的网站存在问题，黄色蝴蝶徽标未显示在Internet Explorer中，但在Chrome和其他浏览器中显示。

我甚至不知道问题出在哪里，所以我找不到任何东西。

如果您需要更多信息告诉我;这是Website（看问题打开）。

#logo
{
    z-index:2333;
    position:absolute;
    width:70px;
    height:70px;
    margin-left:-375px;
    margin-top:-24px;   
}

抱歉我的英语不好，而不是我的母语。

Answer 1

此处的问题似乎是使用align属性（例如<div align='center'>...</div>）在元素中使用绝对定位元素的默认位置。 Chrome允许align属性将绝对定位的元素居中，而Internet Explorer 11则不会。

通过http://remote.modern.ie检查 in-development 版本的Internet Explorer后，看来未来的版本Internet Explorer将以与Chrome相同的方式处理此问题，使以下解决方案仅与向后兼容性。

应用以下更改来解决问题：

div#wrapper {
    width: 768px;
    margin: 0 auto;
}

通过在width: 768px和#wrapper上设置margin: 0 auto，我们会采用更好的方法来确定布局的中心位置，以及定位不合时宜的孩子。

#logo {
    /* margin-left: -375 */
}

现在需要的是删除上述规则。由于改进了居中，我们不再需要指定左边距。

从长远来看，我会鼓励你完全不依赖边距来定位绝对定位的元素。相反，它将使用更明确的绝对坐标：

#logo {
    left: 0;
    top: 187px;
}

以下是来自Internet Explorer的F12开发人员工具的更改摘要，其中显示了差异：

Answer 2

你的定位很乱。您给出徽标absolute定位，但不指定任何定位属性（左/上/右/下） - 这使得CSS标准未定义图像的结果位置。在这种情况下，Chrome / Firefox默认为left:50%，IE为left:0。

通过在left:50%的CSS规则中添加#logo来明确说明，该图片将再次出现在IE中。

我建议阅读一些关于盒子模型实际工作原理的更多信息，你的网站现在真的一团糟，这是一个奇迹，它的工作和它一样好它现在就做了。