Html 狩猎旅行'；s"；浮动：右“；使内联div元素充当块元素

我的问题是Safari特有的。也就是说，在我的标题中有一个由两个按钮组成的div。div向右浮动。但是，这个“float:right”使两个按钮元素的行为类似于块元素——每个元素位于不同的行上。我尝试将“clear”属性应用于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>`

---

这两种说法似乎有冲突：“我的问题是Safari特有的。”“这个问题在Firefox或Safari中不存在。”我是否有误解？请原谅我的错误。我的意思是：Firefox或Chrome**中不存在这个问题。错误已通过编辑更正。如果删除

width:4vw或将其更改为（例如！！）
宽度：70px
或
填充：5px 10px在
#注册登录按钮上。。。这应该适用于大多数现代浏览器：-信息支持谢谢@aldanux。将“宽度”设置为基于像素的值就成功了。谢谢你分享的链接。我觉得我会经常引用它。
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%;
   }