0

個人的なプロジェクトとして WordPress テーマを作成する必要があります。IE8 でテストした後、すべてのページでフッターが正しく表示されていないようです。すべてのページのフッターが同じスタイルであるため、これは非常に奇妙です。

IE8 開発者ツールですべてのスタイリングを無効にしましたが、問題は解決しません。

連絡先ページでは、フッターが左端にあるように見え、フッターの半分しか表示されません。

ブログページでは、フッターの幅が 960px になり、中央に配置されているようです。

残りのページでは、フッターは問題ないように見えます。

上で述べたように、すべてのフッター ページのスタイルは同じであるため、異なるページでフッターの表示が異なる理由がわかりません。

ここにウェブサイトがあります： ウェブサイト

フッター マークアップ全体と CSS を投稿しています。これは、どのような CSS の間違いが IE8 で同じマークアップと CSS を異なるページで異なるように表示するのかがわからないためです。

HTML:

<footer>
    <div class="center">
          <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Sidebar') ) : ?>  
          <h2 class="widget-title">No Widgets added</h2>  
          <p>Please login and add some widgets to this sidebar</p>  
          <?php endif ?>     
     </div>
        <div id="copyright">
            <p>&copy; Copyright <?=date('Y');?> <?php bloginfo('name'); ?> by <a href="<?php echo AUTHOR_URL ?>"><?php echo AUTHOR ?></a> All Rights Reserved.</p>
        </div>
       <?php wp_footer(); ?>
</footer>

CSS:

 footer{
        background:url(img/footer.png) repeat-x #1a1a1a;
        padding:33px 0;
    }
    footer div.center{
        overflow:hidden;
    }
    footer div.center div.boxFooter{
        display: inline-block;
        float:left;
        width:210px;
        margin-left: 40px;
    }
    footer div.center div.boxFooter:first-child{
        margin-left: 0;
    }
    footer div.center div h2{
        color:#cccccc;
        font-size: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ccc;
    }
    footer div.center div li{
        padding:10px 0;
        border-bottom:1px solid #b6b6b6;
    }footer div.center div li:last-child{
        border:none;
    }
    footer div.center div li a{
        text-decoration: none;
        color:#b6b6b6;
    }
    footer div.center div li a:hover{
        text-decoration: underline;
    }
    footer div.center div p{
        margin-top: 10px;
        text-align: justify;
        color:#b6b6b6;
    }
    footer form#searchform input{
        border-radius:5px;
        margin-top: 15px;
    }
    div#copyright{
        width:960px;
        margin:0 auto;
        border-top:1px solid #b6b6b6;
        margin-top:25px;
        color:#b6b6b6;
    }
    div#copyright p{
        margin-top:30px;
        text-align: center;
    }
    div#copyright p a{
        color:#1fa2e1;
        text-decoration: none;
    }
    div#copyright p a:hover{
        text-decoration:underline;
    }
    footer div.tagcloud{
        padding-top: 15px;

    }
    footer div.tagcloud a{
        color:#B6B6B6;
        text-decoration: none;
    }
    footer div.tagcloud a:hover{
        text-decoration: underline;
    }
4

1 に答える 1

1

style.css ファイルの先頭に Reset CSS を含める必要があると思います。

CSSをリセット

さらに、Web サイトはすべてのブラウザーでまったく同じように表示される必要があります。

于 2012-08-23T20:35:31.777 に答える