Question

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

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

感谢您的帮助。

Answer 1

Internet Explorer 7和8是较旧的浏览器，因此它们不支持现代HTML中提供的新元素。您可以通过引用HTML5 Shiv来教授它们。

在<meta>的{{1}}标记后面添加以下内容：

<head>

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

Answer 2

除了IE5和IE之外的HTML5元素。 8不明白。

为什么不制作两个div：

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

CSS .mycolumn {float：left}

或者您可以尝试使用现代化器http://modernizr.github.com/Modernizr/test/

CSS在IE 7和IE 8中不起作用..特别是ul li

2 个答案: