网页在IE中无法正常显示

I know this is a well-known issue in web design. My web site works as expected on Firefox, Opera and Safary but on IE the original design is lost. There is something wrong with the container as you can see in: www.skaldenmet.cjb.net

我知道这是网页设计中一个众所周知的问题。我的网站在Firefox，Opera和Safary上按预期工作，但在IE上，原始设计丢失了。如您所见，容器有问题：www.skaldenmet.cjb.net

I'm aware the coding is not that good, but I would like someone to tell me where does exactly the problem lies so I don't have to re-design everything from the scratch.

我知道编码不是那么好，但我希望有人告诉我问题究竟在哪里，所以我不必从头开始重新设计。

I hope someone can help. Thanks in advance!

我希望有人能帮帮忙。提前致谢！

HTML SOURCE

HTML来源

<html>
<head>
  <link rel="icon" href="favicon.jpg" type="image/x-icon" />
  <link href="skaldenmet-css.css" rel="stylesheet" type="text/css">
  <title>Skaldenmet-Folk Metal</title>
</head>
<body>
  <div id="container">
    <div id="header"></div>
    <div id="navigation">

        <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="history.html">Historia</a></li>
            <li><a href="music.html">Música</a></li>
            <li><a href="band.html">Banda</a></li>
            <li><a href="contact.html">Contacto</a></li>

            <li><a href="license.html">Licencia CC</a></li>
            <li><a href="links.html">Enlaces</a></li>
            <li><a href="english.html">English</a></li>
            <li><a href="news.html">Noticias</a></li>
        </ul>
    </div>
    <div style="text-align: justify; background-image: url('bg55.jpg');">


            <h1>Bienvenidos a Skaldenmet,</h1>  
           <div style="text-indent: 160px;">  un proyecto folk metal desde el norte de Argentina.</div>
        <div style="padding: 5px;">
        <p>     
            En este sitio encontrarán información sobre la banda así como la posibilidad de descargar 
            <a href="music.html" title="Descargar el disco">"Bosque bajo la noche"</a>, el primer, y tal vez último, disco lanzado.<br>
        </p>
        </div>
    </div>
    <div id="footer">
        <p>2010-2011 | www.skaldenmet.cjb.net | Republica Argentina </p>
        <p>Content on this site is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></p>
        <p>Sitio desarrollado con software libre <a href="http://es.wikipedia.org/wiki/GNU/Linux">GNU/Linux</a>.</p>
    </div>

  </div>
</body>
</html>

CSS FILE

CSS文件

@CHARSET "ISO-8859-1";
*
    {
        padding: 0;
        margin: 0;
    }
    body
    {
        font-family:    Optima, Ã¢â‚¬ËœLucida GrandeÃ¢â‚¬â„¢, Ã¢â‚¬ËœLucida Sans UnicodeÃ¢â‚¬â„¢, Verdana, Helvetica, Arial, sans-serif;
        font-size:      12px; color: #000;
        text-align:     center;
        padding:        12px 0;
        background:     #FCFCFC;
    }
    #container
    {
        margin: 0 auto;
        width: 800px;
        background:#fff;
        border-width: 2px;
        border-style:solid; 
    }
    #header
    {
        background-image: url(header2.jpg);
        background-repeat: repeat;
        width:800px;
        height: 200px;              
    }
    #header h1
    {
        text-align:right;
        padding-top: 80px;
        padding-right: 20px;

    }

    #navigation 
    {
        float: left;
        width: 800px;
        background: #333;

    }

    #navigation ul 
    {
        margin: 0;
        padding: 0; 
    }

    #navigation ul li 
    {
        list-style-type: none;
        display: inline;
    }

    #navigation li a
    {
        display: block;
        float: left;
        padding: 5px 10px;
        color: #fff;
        text-decoration: none;
        border-right: 1px solid #fff;
    }

    #navigation li a:HOVER 
    {
        background: #383;
    }

    #content-container, #content-container-index
    {
        clear:left;
        background-image: url("bg55.jpg");
        height: 400px;

    }

    /* esto no se si es necesario */
    #content-container 
    {
        padding:20px;
    }

    #content-image{
        width: 780px;
        text-align: justify;

    }
    #content-container h2
    {
        color:#000;
        font-size: 160%;
        margin: 0 0 .5em;
    }

    #footer {
        background-image: url(footer.jpg);
        background-repeat: repeat;
        height: 50px;  
    }

a:link { 
    color: #333333;
    }
a:visited { 
    color: #333333;
    }
a:hover { 
    color: #CCCCCC;
    background-color: #333333;
    text-decoration: none;
    }
a:active { 
    color: #333333;
    }

1 个解决方案

#1

You need to add a doctype as the very first line to trigger Standards Mode:

您需要添加一个doctype作为触发标准模式的第一行：

<!DOCTYPE html>

Without it, IE is rendering your page in Quirks Mode (which emulates IE5.5).

没有它，IE将以Quirks模式（模拟IE5.5）呈现您的页面。

See: http://hsivonen.iki.fi/doctype/

请参阅：http：//hsivonen.iki.fi/doctype/

I'm not intimately familiar with your site, but after manually changing the browser mode to IE9 mode just to test (hit F12), it looks "identical" to Chrome.

我对您的网站并不熟悉，但在手动将浏览器模式更改为IE9模式后进行测试（点击F12），它看起来与Chrome相同。

1 个解决方案

#1

更多相关文章

随机推荐