1

這是我的HTML。你可以看到更多www.tuvid.ee。我最大的問題是左邊的菜單在IE中不一樣。第二個問題是,當我調整我的頁面大小時,內容正在移動。也許有人可以告訴我這個位置元素有什麼問題。CSS不能在IE 7和IE 8中工作..特別是ul

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

感謝您的幫助。

回答

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/

1

Internet Explorer 7和8是舊的瀏覽器,並因此它們不支持現代HTML中提供的新元素。你可以他們雖然通過參考HTML5 Shiv

添加以下只是在<head><meta>標籤之後:

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

這似乎立即解決您的問題。