Internet Explorerのリストタイプの問題

Question

.work .nav { 
    list-style: none; 
    margin: 0 0 5px 5px; 
    padding: 0; 
    position:absolute; 
    top:248px; 
    left:15px; 
    z-index: 2; 
} 
.work .nav:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.work .nav li { 
    float: left; 
    margin-right: 5px; 
} 
.work .nav li a { 
    float: left; 
    display: block; 
    padding-top: 10px; 
    width: 10px; 
    height: 0; 
    border: 1px solid #ccc; 
    overflow: hidden; 
} 
.work .nav li a:hover { 
    background: #bbb; 
} 
.work .nav li a.on { 
    background: #ccc; 
} 

ThisはFirefoxとInternet Explorerの表示方法です。それはFirefoxで完璧に見えるが、IEではそれがうんざりしている。

この問題を解決するにはどうすればよいですか？

ありがとうございます。

Answer 1

可能性を修正しました（IE8とFirefox 3の私の作品）パディングトップを削除し、高さにそれを変更することです：10pxの、そして例えば、背景と同じテキストの色を作るには：

.work .nav li a { 
    float: left; 
    display: block; 
    width: 10px; 
    height: 10px; 
    border: 1px solid #ccc; 
    color:#fff; 
    overflow: hidden; 
} 

.work .nav li a:hover { 
    background: #bbb; 
    color:#bbb; 
} 
.work .nav li a.on { 
    background: #ccc; 
    color:#ccc; 
} 

（編集：HTMLのために私が使用：

<div class="work"> 
<ul class="nav"> 
<li><a href="">1</a></li> 
<li><a href="">2</a></li> 
<li><a href="">3</a></li> 
</ul> 
</div> 

）

Answer 2

変更CSSの次作品：

.work .nav li { 
    float: left; 
    margin-right: 5px; 
    height: 10px; 
    line-height: 0px; 
} 

これは、私がテストするIE8が手元になかったが、それは、正しく動作になります。私は をリンクの内容として使用しました。

Answer 3

あなたのCSSとAlistair KnockのHTMLを使って、IE（IE7モードではIE8とIE8）をquirks modeに入れることで問題を再現できました。標準モードで正常に表示されたため、あなたのHTMLに有効なDOCTYPEを含めることで問題を解決できると思いました。

Iは、癖や標準モード（ならびにIE8とIE7モード）を切り替えるためにIE Developer Toolbarを用います。それは非常に便利です。