ところでこの IE の仕様を見てくれ。コイツをどう思う? すごく･･･不便です。orz
仮に IE7 で対応したとしても、IE6 以前のブラウザを使いつづける人も多いでしょう。つまり、結局、そう簡単に使うことができないわけです...。実は以前、装飾の意味で メニューに 「|」 パイプを使っていたのですが、順不同リストに、装飾をマークアップするのはおかしいとご指摘があり、対応策を練ったのです。
もし、IE が対応していれば、After 擬似クラスを使って装飾したんですが、それができないので、Border を使って装飾を表現することにしました。しかし、アクセシビリティを考えて display : block と共存させなければなりません。あれこれ悩んだ挙げ句、こんな感じになりました。
本家サイトの CSS
div#menu {
background-color : #F5F5F5;
border-color : #A5ACB2;
border-style : solid none solid none;
border-width : 1px;
margin : 0px;
padding : 1px 0px 1px 3px;
height : 20px;
}
#menu ul {
margin : 0px;
padding : 0px;
white-space : nowrap;
width : 600px;
}
#menu li {
border-right : solid 1px #D0D0D0;
float : left;
margin : 1px 0px 0px 0px;
padding : 1px 0px 1px 0px;
text-align : center;
width : 92px;
}
#menu a {
color : #404040;
display : block;
font-size : 13px;
margin : 0px;
padding : 1px;
width : 80px;
}