1

これは私の HTML です。もっと見ることができます www.tuvid.ee . 私の最大の問題は、左側のメニューが IE と同じではないことです。2 つ目の問題は、ページのサイズを変更すると、コンテンツが移動してしまうことです。誰かが位置要素のどこが悪いのか教えてくれるかもしれません。

<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要素です。

2つのdivを作成してみませんか：

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

CSS .mycolumn {float：左}

または、モダナイザーhttp://modernizr.github.com/Modernizr/test/を試すことができます

于 2012-12-11T01:06:38.450 に答える