1

这是我的 HTML。您可以查看更多 www.tuvid.ee 。我最大的问题是左边的菜单在IE中不一样。第二个问题是，当我调整页面大小时，内容会随之移动。也许有人可以告诉我位置元素有什么问题。

<aside>
    <nav>
        <ul id="navlist">
            <li>
                <a href="eessona.php" id="homenav"><strong>Kui tuvid
                kadusid</strong></a>
            </li>

            <li>
                <a href="kesnadolid.php" id="kesnav"><strong>Kes nad
                olid?</strong></a>
            </li>

            <li>
                <a href="arhiivipildid2.php" id=
                "arhnav"><strong>Arhiivipildid</strong></a>
            </li>

            <li>
                <a href="videod.php" id="vidnav"><strong>Videod ja
                lingid</strong></a>
            </li>

            <li>
                <a href="sofiblogi.php" id="sofnav"><strong>Sofi
                blogi</strong></a>
            </li>

            <li>
                <a href="sofieestis.php" id="eestnav"><strong>Sofi
                Eestis</strong></a>
            </li>
        </ul>
    </nav>
</aside>

这是我的 CSS：

body#home a#homenav,
body#kesnadolid a#kesnav,
body#arhiivipildid a#arhnav,
body#videod a#vidnav, 
body#sofiblogi a#sofnav,
body#sofieestis a#eestnav {
    color: #fff;
    background: #930;
}

aside nav {
    width: 300px;
    margin: 50px 50px 0;
    border-bottom: 0px;
    border: 3px solid white;
}

html>body aside nav {
    width: 300px;
}

aside nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

aside nav li {
    border-bottom: 3px solid white;
}

aside nav a {
    display: block;
    background: #808080;
    color: #fff;
    padding: 12px;
    font-size: 13px;
    text-decoration: none;
}

html>body aside nav a {
    display: block;
    background: #808080;
    color: #fff;
    padding: 12px;
    font-size: 13px;
    text-decoration: none;
}

aside nav strong {
    text-transform: uppercase;
    font: normal 23px/normal Blocksta,Helvetica,Arial,sans-serif;
}

aside nav li ul {
    border-top: 4px solid white;
    border-bottom: 4px solid white;
    margin-left: 70px;
}

aside nav li li {
    border: 0;
}

.main nav ul {
    margin: 0;
    padding: 0;
    padding-top: 10px;
}

.main nav ul li {
    float: left;
    margin-right: 20px;
}

.main nav ul li   
              p {
    display: none;
}

aside nav li a:link {
    background: #808080;
    text-decoration: none;
}      /* unvisited link */

aside nav li a:visited {
    text-decoration: none;
    background: #808080;
}  /* visited link */

aside nav li a:hover {
    text-decoration: none;
    background: #666;
}  /* mouse over link */

aside nav li a:active {
    text-decoration: none;
}

谢谢你的帮助。

4

2 回答 2

1

Internet Explorer 7 和 8 是较旧的浏览器，因此它们不支持现代 HTML 中提供的新元素。您可以通过参考HTML5 Shiv来教他们如何操作。

在您的<meta>标签之后添加以下内容<head>：

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

这似乎可以立即解决您的问题。

于 2012-12-11T02:02:30.947 回答
0

除此之外，还有一个 IE 7 和 8 无法理解的 HTML5 元素。

为什么不制作两个 div：

<div id="a" class="mycolumn">Aside</div>
<div id="b" class="mycolumn"><ul><li>My list</li></ul></div>

CSS .mycolumn{ 浮动：左}

或者你可以试试现代化器http://modernizr.github.com/Modernizr/test/

于 2012-12-11T01:06:38.450 回答