我的标题在IE中的CSS问题

Question

我正在使用以下网站：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;
}

SCREEN SHOT

Answer 1

向左浮动.main-navigation和 在标题hgroup中的标题链接上向左浮动 - ＆gt;我建议把它放在div里面

以下是在IE中工作的网站