CSS问题与我的头在IE

我正在以下网站上工作：

它在Firefox和Chrome中看起来很棒，但当我在InternetExplorer中进入主页时，它会将导航菜单连同左侧的社交媒体图标一起放下（见下图）。有谁能帮我找到css代码中的错误，使它在所有浏览器中看起来都正确吗

我在IE10中测试，但在以后的版本中有相同的问题

我认为问题来自社交媒体领域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>

截屏

---

向左浮动。主导航和 在标题hgroup->中的title链接上向左浮动，我建议将其放在div中

下面是在IE中工作的站点

.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;
}