Question

我有以下代码：

的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会显示损坏的图标）

Answer 1

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

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

1 个答案: