サポート » 使い方全般 » アーカイブ表示のfirefoxとieの違い

  • 解決済 TOY_TOY

    (@blacksander)


    お世話になっております。

    現在、ブログでアーカイブを表示しているのですが
    3月から開始したブログで、アーカイブが
    2010年3月
    2010年4月

    と表示されています。
    firefoxでは2つとも表示されているのですが
    ie7・8で確認したところ2010年3月が表示されていません。

    アーカイブを表示しているプログラムはsidebar.phpで、ソースは下記の投稿で記載しています。
    http://ja.forums.wordpress.org/topic/3746?replies=5#post-15708

    ieでソースを見てみると

    <li><a href='http://~/2010/04?cat=4' title='2010年4月'>2010年4月</a></li>
    <li><a href='http://~/2010/03?cat=4' title='2010年3月'>2010年3月</a></li>

    と2010年3月も表示されているはずなのですが・・・
    原因が検討もつきません。
    どなたか、わかる方がいらっしゃいましたら、よろしくお願いいたします。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • もしかすると、スタイルシートあたりが関係してるのかもです。
    Firebugを入れるなどして、その周辺のスタイル設定などを確認してもよろしいかと。

    TOY_TOY

    (@blacksander)

    ご連絡ありがとうございます。
    firebugでみてはいるのですが、firefoxでは正しく表示されているので
    問題なくスタイルシートが効いているのかと思います。

    ieでもfirebugのような、どのスタイルシートが効いているかなど調べるツールがあるのでしょうか?
    ieでソースを表示してliタグで囲まれて、正しく表示されるはずなのですが。。。

    ieのバグなのでしょうか?

    もっと良い方法があるかもですが、一つの方法として提案します。

    そのできあがったページをhtml保存します。
    そこにはスタイルシートも同時に保存されると思いますので、リネームするなどしてスタイルシートを無効にするようにします。
    その状態で、3月も表示されていますか?

    疑わしいのは、アーカイブリストのところが line-height: 0 とかになってしまっているとか・・・

    TOY_TOY

    (@blacksander)

    早速のご連絡ありがとうございます!

    そのできあがったページをhtml保存します。
    そこにはスタイルシートも同時に保存されると思いますので、リネームするなどしてスタイルシートを無効にするようにします。
    その状態で、3月も表示されていますか?

    試してみたところ、3月は表示されていました。

    cssは、全くの初心者で申し訳ないのですが、今アーカイブの表示のところが
    <h3 class=”mgnT30″>といクラスで囲われています。

    読み込んでいるcssファイルを見ると
    .mgnT30 {
    margin-top:30px !important;
    }
    と記載してあるのですが、これでは表示されていないのは当然?の結果なのでしょうか?

    大変お手数ですが、よろしくお願いいたします。

    IEではDebugBarというアドオンがあります。
    firebugほどは使いやすくないですが。

    <h3 class=”mgnT30″>といクラスで囲われています。

    これは関係ないです。通常hで囲むマークアップはしません。

    <ul> 〜〜 </ul>に何かheightなどを指定している可能性はありませんか?
    入りきらない<li><a href='http://~/2010/03?cat=4' title='2010年3月'>2010年3月</a></li>が表示されていないとか?

    あと、overflowがhiddenになっているとか、、、。
    URLを提示してみると解決が早いと思います。

    TOY_TOY

    (@blacksander)

    ご連絡頂き、誠にありがとうございます!

    URLを提示してみると解決が早いと思います。
    こちらは、まだテスト環境での作成途中なので、URLを記載することができません。
    申し訳ありません。

    <ul> 〜〜 </ul>
    に何かheightなどを指定している可能性はありませんか?

    これに関しては特に指定しているところはありませんでした。。。
    指定したほうがよろしいのでしょうか?

    あと、overflowがhiddenになっているとか、、、。

    overflowに関してはcssファイルに記載している部分がなかったので、たぶんhiddenになっていることはないと思いますが、私がcssの初心者なものでcssが原因の場合
    細かく教えていただけると幸いです。

    IEではDebugBarというアドオンがあります。

    使ってみます!教えていただき大変ありがとうございます。

    長文になって申し訳ございません。
    大変お手数かと思いますが、よろしくお願いいたします。

    読み直してみましたが。

    Firefoxでは以下の順番

    2010年3月
    2010年4月

    ie7・8のソースは

    <li><a href='http://~/2010/04?cat=4' title='2010年4月'>2010年4月</a></li>
    <li><a href='http://~/2010/03?cat=4' title='2010年3月'>2010年3月</a></li>

    順番が違いますね、、。

    ちなみにIE6ではどうなのでしょうか?
    無い場合は IETesterで確認できると思います。

    ちなみにこのアーカイブを表示する部分を囲むタグはどうなってますか?
    <div class="hoge">〜〜〜〜</div>等の場合hogeクラスが影響している場合があります。
    また、ulやliのmarginにマイナス設定されているとか、paddingの設定がおかしいとか、、、。
    考えられることは沢山あります。

    たとえばsafari(Windows版もあり)には「開発」メニューがあり、右側のペインで個別にCSS設定をON・OFFできたり、数値を書き換えたりできます。
    このことに関してはfirebugよりも使いやすいです。

    TOY_TOY

    (@blacksander)

    ご連絡が遅くなり申し訳ありません。
    やはりCSSの問題でした。
    line-heightを100と追記したところ表示されました!

    ありがとうございました。

    line-height:100は行の高さを文字の高さの100倍にするって事だけどFirefoxで崩れませんか?

    モデレーター IKEDA Yuriko

    (@lilyfan)

    基本的に単位がないと変なことになりそうですよね。100px とした方が安全でしょう。もしくは8emあたりにしておくとか

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「アーカイブ表示のfirefoxとieの違い」には新たに返信することはできません。