Question

该网站的新手，希望有人可以帮助我。

我正在使用CSS3和HTML5设计一个新网站（两者中都没有向导，但是基础知识有所下降），但出于某种原因，当我在IE9中查看基本布局时，它将无法正确显示颜色或格式。同一页面将根据Chrome和Firefox中的要求显示。有人可以帮我解决这个问题吗？

我将在下面发布代码，只是一个非常基本的布局，包含测试颜色和示例文本。感谢。

`

HTML CODE

<!DOCTYPE html>

<html>
<head>
<link href="css/test.css" rel="stylesheet" media="screen">


<title>Testing123.com</title>

</head>

<body>
    <header id="mainHeader"><h1>TestSite123.com</h1>
        <nav id="mainNav">
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
            </ul>
        </nav>
    </header>
    <aside id="lhs">
        <h2>Recent1</h2>
        <h2>Recent2</h2>
        <h2>Recent3</h2>
    </aside>
    <content id="Content">
        <h2>News</h2>
        <h2>Misc</h2>
    </content>
    <aside id="rhs">
        Right Side
    </aside>
    <footer id="mainFooter">Footer</footer>
</body>
</html>

CSS CODE

@charset "utf-8";
/* CSS Document */

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    background-color: #ffffff;
}

body {
    width: 85%;
    margin: 0 auto;
}


header#mainHeader {
    background-color: #000000;
    height: 140px;
    position: relative; 
}

header#mainHeader h1 {
    color: #ffffff;
    font-size: 2em;
    font-family: Arial;
    }


nav#mainNav ul, ul.menu {
    list-style: none;
    }

nav#mainNav {
    background-color: #e3e6eb;
    text-decoration: none;
    position: relative;
    height: 25px;
    margin-top: 54px;
    margin-bottom: none;

    }

header#mainHeader nav ul {
    float: right;
    position: relative;
    margin-top: 1px;

}

header#mainHeader nav li {
    float: right;
    font-family: Garamond;
    font-size: 1.2em;
    padding: 0 12px;
}

aside#lhs{
    width: 200px;
    background-color: brown;
    font-size: 1.8em;
    float: left;
    }

content#Content {
    font-size: 1.6em;
    color: red;
    background-color: black;
    width: 200px;
    }

aside#rhs{
    background-color: green;
    font-size: 1.4em;
    float: right;
    position: relative;
    width: 150px;
    }

footer#mainFooter {
    clear: both;
    background-color: white;
    font-size: 1.2em;
    }
/*end of css file*/`

Answer 1

首先，在您的CSS中，不要过度指定您的ID（或任何相关元素）

所以不要写header#mainHeader，而只是#mainHeader

其次，

不要给你的html元素一个背景色，而是在body标签上设置它。

第三，

没有正确显示的是什么？

IE9无法正确呈现CSS文件

HTML CODE

CSS CODE

1 个答案: