Half-Retirean's Lazy Life Diary / ダラダラ余生日記

ところでこの 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;
}