DIV 中的图像在 FireFox、Chrome 和 Opera 中消失，但在 Safari 中显示正常答案

【问题标题】：Image inside DIV disappears in FireFox, Chrome, and Opera but shows up fine in SafariDIV 中的图像在 FireFox、Chrome 和 Opera 中消失，但在 Safari 中显示正常
【发布时间】：2012-02-06 14:53:56
【问题描述】：

我有以下代码：

index.html

<HTML>
    <HEAD>
        <TITLE>My App</TITLE>
        <LINK rel="stylesheet" type="text/css" href="style.css">
    </HEAD>
    <BODY>
        <div id="logo"><img src="logo.jpg" /></div>
        <div id="menu">
            <FORM METHOD="LINK" ACTION="new.php">
                <INPUT TYPE="submit" VALUE="Create New Entry">
            </FORM>
            <FORM METHOD="LINK" ACTION="viewall.php">
                <INPUT TYPE="submit" VALUE="View All Entries">
            </FORM>
            <FORM METHOD="LINK" ACTION="list.php">
                <INPUT TYPE="submit" VALUE="Generate Mailing List">
            </FORM>
        </div>
        <div id="search">
            <form action="search.php" method="post">
              Search By First or Last Name:
              <input type="text" name="term" />
              <input type="submit" name="submit" value="Submit" />
            </form>
        </div>
    </BODY>
</HTML>

和

style.css

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}

div#logo {
    position:absolute;
    width:290px;
    height: 200px;
    top: 0px;
    left:0px;
    background-color: black;
}

div#menu {
    position: relative;
    width: 150px;
    height: 150px;
    top: 20px;
    left: 140px;
    background-color: black;
}

div#search {
    position: relative;
    width: 265px;
    left:25px;
    clear: both;
    color: white;
    background-color: black;
}

在 Safari 中查看时看起来不错，但在 FireFox、Chrome 或 Opera 中查看时，图像消失了。它在 Chrome 和 Opera 中完全消失了，在 FireFox 中它显示一个断开的链接图标。我知道我在这里使用 CSS 并不完全正确，甚至是最佳实践，但我仍然无法弄清楚为什么图像没有显示？（还有，为什么 FireFox 会显示损坏的图标）

【问题讨论】：

你的 css 和 html 看起来不错。您可能想再次检查图像的 src，因为您看到了损坏的图像链接。您可能需要清除您的 Safari 缓存并查看图像是否仍然存在以确保确定。
我在 Safari 和 Firefox (jsfiddle.net/ambiguous/4xDkK) 中看到了同样的情况。如果您在 <img> 中使用绝对路径会发生什么（无论如何您都应该这样做）。
发布的代码有效，例如在 Firefox 上，当我使用现有图像的 URL 时。如果图像不存在，Firefox 就不会像往常一样显示图像。请发布一个可以实际观察到问题的演示。请详细说明您所说的“断开的链接图标”是什么意思，最好使用屏幕截图。
哇，对不起，伙计们。我重命名了图像，所以它实际上是 logo.jpg.png（或 logo.png.jpg）——我最近从 Windows 切换到了 Mac-OSX，它变得更好了（也几乎是凌晨 2:00）。抱歉浪费你的时间，伙计们，但现在可以了。
请将您自己的答案标记为已接受的答案，谢谢

标签： html css

【解决方案1】：

文件被命名为 .png.jpg，所以它没有显示出来...newb 错误

【讨论】：