サポート » 使い方全般 » ナビゲーションバーがIEだと無効になってしまう

  • 解決済 802houmu

    (@802houmu)


    はじめまして。

    本に載っていたテーマをいじって公開してみました。
    http://802houmu.jp/

    ナビゲーションバーには自作の画像を使い、
    テキストではなく画像でリンク先を表示しています。

    safari(mac)やfirefox(win)なら問題ないのですが、
    IE(win)だとナビゲーションバーからのリンクが無効になってしまいます。

    ちなみに、サイドバーにあるメニューは問題なくリンクします。

    スタイルシートは以下のように設定しています。

    /*ナビゲーションバー*/
    .nav {font-size: 0px;
    height: 36px;
    background-image: url(images/navbar.jpg);
    border: solid 0px #aaaaaa;
    margin: 0;
    padding: 0;}

    .nav ul {margin: 0;
    padding: 0;}

    .nav li {list-style-type: none;
    float: left;}

    .nav li a {display: block;
    color: #ffffff;
    width: 159px;
    line-height: 32px;
    margin: 2px 0;
    border-right: solid 1px #c0c0c0;
    text-align: center;}

    .nav li a:hover {background-color: #000000;
    filter: alpha(opacity=25);
    -moz-opacity:0.25;
    opacity:0.25;}
    /*ナビゲーションバー*/

    解決法をご存じでしたら、ぜひお教えください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    本来であればこのご質問はWordPressに関するものではなくHTMLとCSSに関することなので、この場で解決するのには相応しくない内容なのですが、それを理解したうえで簡単にお答えします。

    おそらく.nav {font-size: 0px;の部分が原因でしょう。
    0px指定以外に、a要素に高さ指定がないのでクリックできるエリアが消滅しているとかそんな感じだと思います。
    (Fxやwebkit系だとline-height: 32px;のおかげで高さが出ている)

    簡単にやるならa要素について明示的に高さを指定するなどで解決できるかもしれませんが、いっそ以下のようなサイトを参考にして組み直したほうが良いかもしれません。

    http://css-happylife.com/archives/2006/1009_0229.php

    http://detarame.moo.jp/2011/03/31/%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E7%B3%BB%E3%81%AEcss%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC/

    トピック投稿者 802houmu

    (@802houmu)

    ご回答ありがとうございます。

    2番目のリンクを参考に、なんとか形にすることができました。

    今後は質問を投稿する場所などにも気をつけていきます。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    おぉ、コードも綺麗になりましたね。よかったです。スレッドを解決済みにするのをお忘れなく!

    ちなみに別件ですが、「本日の予定」の部分のTwitterウィジェットの中身がIE9で表示されないのはTwitter側のwidget.jsの仕様変更によるものらしくて、各地で発生しているのでこれは対応を待つしか無いかもです。

    トピック投稿者 802houmu

    (@802houmu)

    mypacecreatorさん

    返事が遅くなってしまって申し訳ございません。

    解決した後はほったらかしでした。
    「解決済み」にもしておらず、ひどいマナー違反をしてしまいました。

    Twitterの件にまでお答えくださっていたのにも気づかず、
    重ねてお詫び申し上げます。

    現在はサイトも新しくして、当時よりは少しマシになったような気がします。

    また何かございましたら、よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ナビゲーションバーがIEだと無効になってしまう」には新たに返信することはできません。