Question

好的，所以我差不多完成了创建我的第一个网站。然而，它似乎在IE中运行不佳。它在Firefox和Chrome中运行良好。背景加载但主要问题是图片链接似乎坏了？任何帮助将不胜感激。

我的网站：ngkevin-art.com

CSS：

body {
    width:auto;
    height:auto;
    background-image:url(images/bg_main2.png);
    background-color:#2d2d2d;
    background-repeat:no-repeat;
    background-position:center;
    margin-top:30px;
}


#container {
    width:1280px;
    height:960px;
    margin-left:auto;
    margin-right:auto;

}

#wrapContact {

    width: 520px;
    height: 100px;
    margin-left:735px;
    margin-top: 10px;
    clear: both;
}

#linked {
    float:left; 
    margin-top:35px;
    width: 175px;   
}

#facebook {
    float:left;
    width: 200px;
    margin-left:32px;
    margin-top:25px;

}

#email {
    float:left;
    width:75px;
    margin-left:35px;
    margin-top:20px;

}

#wrapNav {

    width: 475px;
    margin-left:750px;
    margin-top:60px;
}

#wrapCharacters {

    width: 960px;
    z-index: 3;
    margin: 130px auto auto 75px;
    float:left;
}

.turntable {
    margin: .5% auto auto auto;

}

#zanza {

    float:left;
}

#titan {

    float:left;
    margin-left: 10px;
}

#rockBeast {

    float:left;
    margin-left: 10px;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kevin Ng Art Portfolio</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<link rel="stylesheet" type="text/css" href="default3.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />

</head>

<body>

<div id="container">

        <div id="wrapContact">
            <div id="linked">
                <a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b"> 
                <img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
            </div>

            <div id="facebook">
                <a href="http://www.facebook.com/profile.php?id=1309131548"> 
                <img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
            </div>

            <div id="email">
                <a href="mailto: ngkevin.3dartist@gmail.com"> 
                <img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
            </div>
        </div> <!-- End "wrapContact"> -->

        <div id="wrapNav">

            <a href="index.html">                           
            <img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>

            <a href="demo.html">                            
            <img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>

            <a href="about.html">                           
            <img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>

        </div> 
        <!-- End "wrapNav"> -->  

        <div id="wrapAbout">

            <div id="picture">
                <img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
                <div id="text2">
                    <h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
                        and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
                </div>
            </div>

            <div class="text">        
                <h1> Resume: <br/>
                <br/> Email: <br/> <br/>
                <br/> About Me:</h1>            
            </div>

            <div class="text3">
                <h1> <a href="resume/Kevin Ng Resume2.doc"> Click Here </a>
                <br/> <br/> <a href="ngkevin.3dartist@gmail.com"> ngkevin.3dartist@gmail.com </a> <br/> 
                <br/> <br/> <font size="4"> 
                    My desire to be in the game development industry is to work with other individuals that take pride in creating a game, 
                    something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and 
                    artistic skills for that purpose. <br/> <br/>

                    I believe the key to creating memorable game art, whether it be characters or environments, is the story. 
                    Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result, 
                    I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda 
                    showed me a world of endless imagination.  <br/> <br/>

                    The characters which are the focal point of the story, their goals and motivations, their trials and tribulations, 
                    their victories and defeats... These are the things I think about constantly when I look at them. 
                    A character without depth doesn't exist, but if they do, I can only imagine how boring that would be.                     
                </font></h1>
            </div>

        </div>

    </div><!-- End "container" -->

</body>
</html>

Answer 1

图像上的宽度/高度属性导致了问题。您将宽度和高度设置为“自动”。设置明确的宽度/高度：

<img src="zanza/zanza_portrait_top.png" width="179" height="198" border="0" alt="zanza">

或删除宽度和高度属性：

<img src="zanza/zanza_portrait_top.png" border="0" alt="zanza">

Answer 2

IE正在弄乱图像的宽度和高度。很抱歉我无法提供帮助，但删除每张图片的高度和宽度元素会让图片显示给我。

Answer 3

请参阅此链接，了解CSS3中的auto属性。基本上，该版本不支持它，所以如果你明确地设置它或没有属性它会更好。

Link

图像未显示在IE 9中

3 个答案: