兼容性问题与Chrome中的HTML列表

Question

我与IE（11）和Chrome存在兼容性问题。我的网页顶部有一个水平菜单。在IE中，（正确的）菜单如下所示：

但在Chrome中它呈现如下：

HTML看起来像这样：

        <nav>
            <!-- nav menu -->
            <ul class="clearfix">                   
                <li><a runat="server" href="PerfectGift.aspx">the Perfect Gift</a></li>
                <li><a runat="server" href="Contact.aspx">Contact Us</a></li>
            </ul>
            <!-- social links -->
            <ul class="about-socials">
                <li class="fb"><a href="#"><i class="icon-facebook"></i></a></li>
                <li class="twit"><a href="#"><i class="icon-twitter"></i></a></li>
            </ul>
        </nav>

CSS＆＃34; socials＆＃34;：

.socials li a {
    color: #FFF;
    float: left;
    background: url('../images/twitter.png') no-repeat;
    margin: 0 2px;
}

.socials.top {
    display: inline-block;
    overflow: hidden;
    float: right;
    margin-top: 0px;
}

.socials li{
    display: inline-block;
}

CSS for clearfix：

    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

.clearfix {clear:both;}

我尝试了margin: 0;，但它不起作用。 任何帮助或建议将不胜感激。