Html Safari CSS定位规则似乎与其他浏览器的定位规则相互排斥

Html Safari CSS定位规则似乎与其他浏览器的定位规则相互排斥,html,css,Html,Css,我有一些CSS在Chrome和Firefox中看起来不错,但在Safari中出现了一个特定的问题。在Chrome和Firefox中,这三个div/ul项正确对齐,但在Safari中,它们直接堆叠在一起。为了使它在Sf中看起来正确,我可以使三者之间的左边距逐渐变大,但在FF和Chrome中的结果是div远离页面。我已经尝试了一些技巧,包括: @media screen and (-webkit-min-device-pixel-ratio:0){} 这没有改变任何事情。下面是相关的HTML:

我有一些CSS在Chrome和Firefox中看起来不错,但在Safari中出现了一个特定的问题。在Chrome和Firefox中,这三个div/ul项正确对齐,但在Safari中,它们直接堆叠在一起。为了使它在Sf中看起来正确,我可以使三者之间的左边距逐渐变大,但在FF和Chrome中的结果是div远离页面。我已经尝试了一些技巧,包括:

 @media screen and (-webkit-min-device-pixel-ratio:0){}
这没有改变任何事情。下面是相关的HTML:

 <ul id="nav">
   <li class="nav_item"><div id= "work">&nbsp;</div></li>

   <li class="nav_item"><div id="about">&nbsp;</div></li>

   <li class="nav_item"><div id="contact">&nbsp;</div></li>
</ul>

指定您正在测试的浏览器版本可能是值得的。我不想在前面检查,但它是5.1.3。用于Sf和最新版本的Chrome和Firefox。这是Safari的老版本。在最新版本中,布局与Chrome和FF中的相同。但是你的代码没有透露太多。最好提供一个适当的工作示例。
 #work{  height: 50px;
         width: 68px;
     font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    background-color: none;
    background-image: url(work_1.png);
    background-repeat: no-repeat;
    background-size: 120%;
    position: fixed;
    text-align: center;
    z-index: 201;
    padding: 0px 0px 0px 0px;
    margin: 1px 1px 1px 40px;
    display: block;
    clear: both;
    float:right;}


 #about{ height: 50px;
    width: 68px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    background-color: none;
    background-image: url(about.png);
    background-repeat: no-repeat;
    background-size: 120%;
    position: fixed;
    text-align: center;
    z-index: 201;
    padding: 0px 0px 0px 0px;
    margin: 1px 1px 1px 40px;
    display: block;
    clear: both;
    float: right;}

 #contact{ height: 50px;
    width: 84px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    background-color: none;
    background-image: url(contact.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    text-align: center;
    z-index: 200;
    padding: 0px 0px 0px 0px;
    margin: 1px 1px 1px 40px;
    display: block;
    clear: both;
    float:right;}

 #nav {

   padding: 0px;
   display:inline;
   list-style-type:none;
   margin: 30px 0px 0px 700px;
   position:fixed;
   width:600px;


}

 .nav_item {
          display:inline !important;
    position:relative !important;
    margin: 5px 5px 5px 150px;
    width:100px;
    display: inline !important;
}