Internet Explorer不显示图像

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

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

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

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

对不起，我的英语不好，它不是我的母语。

来源

2014-12-06 SaVee

你应该修复你的容器，不再需要绝对定位。为商标和主要标题尝试“float：left”，并将徽标放置在“＃oberdiv”中。 – 2014-12-07 00:06:04

只要我们能理解你的问题，我们会尽力帮助，请不要在你的问题的标题中加上'[标签]'，不要担心'坏的英语'。但是，重要的是，IE的哪个版本？ – 2014-12-07 00:12:29

你也有无效的HTML，它会给你带有Internet Explorer的各种问题。请参阅：http://validator.w3.org/check?uri=http%3A%2F%2Fwww.zitronenfalter-spa.at&charset=%28detect+automatically%29&doctype=Inline&group=0 – Sparky 2014-12-07 00:36:09

你的定位是一个烂摊子。您给徽标absolute定位，但不指定任何定位属性（左/上/右/下） - 这会使图像的合成位置由CSS标准定义。 Chrome/Firefox在这种情况下默认为left:50%，IE为left:0。

明确指出，将left:50%添加到您的CSS规则#logo，图像将再次出现在IE中。

我会推荐阅读一些关于盒子模型实际工作原理的更多信息，但您的网站现在是真的一团糟，这是一个奇迹，它现在正在发挥作用。

来源

2014-12-07 00:13:30

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

通过http://remote.modern.ie检查开发中版本的Internet Explorer后，它将显示未来版本的Internet Explorer会以同样的方式Chrome并处理这个问题，使得只有向后兼容性相关的以下解决方案。

采用以下修改来解决这个问题：

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

通过对#wrapper和margin: 0 auto我们采取中心布局更好的方法，以及定位aboslutely定位儿童设置width: 768px。

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

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

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

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

这里有一个从Internet Explorer的F12开发人员工具，显示一个差异的变化，总结：

Internet Explorer Changes

来源

2014-12-07 00:13:18 Sampson

这是更好的*方法*当然，但从我看到的这将打破他的大部分网站。现在只需在商标上加上'left：50％'是唯一可行的解决方案，直到其他问题得到解决。 – 2014-12-07 00:14:39

@NielsKeurentjes这是什么突破？ – Sampson 2014-12-07 00:15:20

他正在使用全局对中和全局对中的方法，然后将大量随机'position：relative'和'position：absolute'规则添加到不符合流程的元素。这必然会在几个地方打破定位上下文。虽然有了这些小小的修正，但它可能只是工作，但这比他的其他任何事情都要幸运。不要误解我的意思，我都是为了从根本上解决它，但是还有更多的东西比'div＃header'坏了。 – 2014-12-07 00:17:58

Internet Explorer不显示图像

回答

相关问题