Safari的“Float：right”导致内联div元素充当块元素

Question

我的问题特别适用于Safari。也就是说，我的标题内部是一个由两个按钮组成的div。 div漂浮在右边。但是，这个'float：right'使得两个按钮元素的行为类似于块元素 - 每个元素都在不同的行上。我已经尝试将“清除”属性应用于div，但无济于事。我也尝试将“display：table”应用于父div并相应地更改子元素。一切都无济于事。 Firefox或Chrome中不存在此问题。我还没能在IE中测试它 - 除了房子里的mac之外什么都没有。

我试图在Firefox和Safari上传两张显示该网站的图片，但由于我没有发布图片所需的10个声望点，我被拒绝了。

这是HTML：

        <header role="banner">
        <!--Start Navigation-->
            <nav role="navigation" id="global-navigation">
                    <ul><li><a href="index.html">Home</a></li><li>
                    <a href="----">Link 1</a></li><li>
                    <a href="----">Link 2</a></li><li>
                    <a href="----">Link 3</a></li><li>
                    <a href="----">Link 4</a></li><li>
                    <a href="----">Link 5</a></li>
                    <!--Start Signup/LogIn Div-->
                        <div id="signup-login">
                            <button type="button" onclick="----">sign-up</button>
                            <button type="button" onclick="----">log-in</button>
                        </div>
                    <!--End Signup/LogIn Div-->
                    </ul>
            </nav>
        <!--End Navigation-->
        </header>`

这是CSS：

header {
    width: 100%;
    height: 4em;
    background-color: rgb(46, 46, 46);  
    position: fixed;
    top: 0;
}

#global-navigation {
    width: 100%;
    height: 4em;
    margin: auto;
}

#global-navigation ul {
    height: 4em;
    text-align: center;
    }

#global-navigation ul li {
    height: 100%;
    display: inline-block;
    border-radius: 2%;
    padding: 0 3em;
    }



#global-navigation ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    font-weight: normal;
    height: 100%;
    line-height: 4em; /***Vertically centers global-nav text ***/
    vertical-align: center;
    }

#global-navigation ul li:hover {
    background: #e74c3c;
    transition: background-color .30s ease-in-out;
   -moz-transition: background-color .30s ease-in-out;
   -webkit-transition: background-color .30s ease-in-out;
    } 

#signup-login {
    display: inline-block;
    float: right; 
    line-height: 4em;
    } 

#signup-login button {
    background-color: rgb(46, 46, 46);
    height: 3em;
    width: 4vw;
    border: 1px solid #fff;
    border-radius: 7%;
    color: #fff;
    font-size: .7em;
}

#signup-login button:hover {
    background: #e74c3c;
    transition: background-color .30s ease-in-out;
   -moz-transition: background-color .30s ease-in-out;
   -webkit-transition: background-color .30s ease-in-out;
   border-color: rgb(32, 32, 32);
   border-radius: 7%;
   }