Chrome と Firefox では正常に見える CSS がいくつかありますが、Safari では特定の問題が発生しています。3 つの divs/ul アイテムは、Chrome と Firefox では適切に配置されていますが、Safari では互いに直接重なり合っています。Sf で見栄えを良くするために、3 つの間の左マージンを徐々に大きくすることができますが、FF と Chrome では div がページからはみ出してしまいます。これを含むいくつかのハックを試しました:
@media screen and (-webkit-min-device-pixel-ratio:0){}
これは何も変わりませんでした。したがって、関連する HTML は次のとおりです。
<ul id="nav">
<li class="nav_item"><div id= "work"> </div></li>
<li class="nav_item"><div id="about"> </div></li>
<li class="nav_item"><div id="contact"> </div></li>
</ul>
...そしてCSS:
#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;
}