我在 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;
}

屏幕截图

Answer 1

在 .main-navigation 上向左浮动 在标题 hgroup 内的标题链接上向左浮动 -> 我建议将其放在 div 中

下面是在 IE 下工作的网站