Question

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

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

我希望有人可以提供帮助。提前谢谢！

HTML SOURCE

<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

@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;
    }

Answer 1

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

<!DOCTYPE html>

如果没有它，IE会在Quirks Mode（模拟IE5.5 ）中呈现您的页面。

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

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

网页在IE中无法正常显示

1 个答案: