0

私は次のサイトに取り組んでいます: http://tcsdesignreno.com/nvvolunteers/ .

Firefox と Chrome では見栄えがしますが、Internet Explorer でホームページに移動すると、ナビゲーション メニューがドロップダウンし、左側にソーシャル メディア アイコンが表示されます (下の画像を参照)。すべてのブラウザーで正しく表示されるように、css コードのエラーを見つけるのを手伝ってくれる人はいますか?

IE 10 でテストしていますが、以降のバージョンでも同じ問題が発生します。

問題はソーシャル メディア エリア css のトップ マージンから発生していると思いますが、このコードを使用せずにナビゲーション バーの真上に配置する方法がわかりません。

可能な HTML コード

<div class="social-media-home">
                <a title="Follow us on Facebook" href="https://www.facebook.com/NevadaVolunteers" target="_blank">
                    <img class="alignleft size-medium wp-image-924" title="Follow us on Facebook" alt="Facebook" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/facebook.png" width="32" height="32" />
                </a>
                <a title="Check us out on Twitter" href="https://twitter.com/nvvolunteers" target="_blank">
                    <img class="alignleft size-medium wp-image-922" title="Follow us on Twitter" alt="Twitter" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/twitter.png" width="32" height="32" />
                </a>
                <a title="Pin us on Pinterest" href="http://pinterest.com/nvvolunteers/" target="_blank">
                    <img class="alignleft size-full wp-image-921" title="Pin us on Pinterest" alt="Pinterest" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/pinterest.png" width="32" height="32" />
                </a>
                <a title="See us on Instagram" href="http://instagram.com/nvvolunteers#" target="_blank">
                    <img class="alignleft size-medium wp-image-923" title="See us on Instagram" alt="Instagram" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/06/instagram_64x64.png" width="32" height="32" />
                </a>
                <a href="#" target="_blank">
                    <img class="alignleft size-full wp-image-926" style="display: none;" title="Add us on Google +" alt="Google Plus" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/GooglePlus.png" width="32" height="32" />
                </a>
                <a href="#" target="_blank">
                    <img class="alignleft size-medium wp-image-925" style="display: none;" title="Find us on Linked In" alt="LinkedIn" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/linkedin.png" width="32" height="32" />
                </a>
                <a href="#" target="_blank">
                    <img class="alignleft size-medium wp-image-923" style="display: none;" title="Watch us on YouTube" alt="YouTube" src="http://tcsdesignreno.com/nvvolunteers/wp-content/uploads/2013/05/youtube.png" width="32" height="32" />
                </a>                
            </div>

            <div id="home-nav-container">
            <div class="resizer"><span id="font-resizer-ticker"></span></div>

            <div id="home-nav"><?php wp_nav_menu( array('menu' => '5' )); ?></div>
            </div>

可能な CSS コード

.social-media-home {
    position:relative;
    float: right;
    margin: 4.2rem 0.5rem 0 0;
    clear:right;
}

.social-media-home img {
    margin: 1rem 5px 0 0!important;
}

#home-nav-container {
 float: right;
 text-align: right;
 clear: right;
}
#home-nav {
    float: right;
    padding: 0.8rem 1.0714rem 0 0;
}

#home-nav li{
    display: inline-block;
    font-weight:bold;
}
#home-nav li a{
    text-decoration:none;
}

#home-nav li:not(:last-child):after
{
    content: ' |';
}

.resizer {
    /*clear:right;*/
    float:right; 
    padding: 0.8rem 1.0714rem 0 0;
}

スクリーンショット

IE ナビの問題

4

1 に答える 1

1

.main-navigation で左にフロートし、ヘッダー hgroup 内のタイトル リンクに左にフロート -> これを div 内に配置することをお勧めします

以下はIEで動作するサイトです

IE での作業

于 2013-06-26T04:13:36.903 に答える