私は次のサイトに取り組んでいます: 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;
}
スクリーンショット