mac 上 safari 的 css hack答案

【问题标题】：css hack for safari on macmac 上 safari 的 css hack
【发布时间】：2016-11-09 06:04:14
【问题描述】：

只是想知道是否有人可以帮助我在 mac 上进行 safari 的 css hack，我正在尝试做的事情在 windows 的 safari 上看起来不错，但在 mac 上看起来不同，

在我的顶部导航中，我试图将所有内容居中，它看起来以 firefox 为中心，即 safari，但在 mac 上的 safari 上它没有居中，所以我想给它留出只能在 safari for mac 上可见的左边距.

  <div id="main_nav">
 <ul>
      <li><a href="about.php">about us</a></li>
      <li><a href="women.php">women</a></li>
      <li><a href="man.php">men</a></li>
      <li><a href="beauty.php">beauty</a></li>
      <li><a href="lust.php">the lust</a></li>
      <li><a href="press.php">press</a></li>
    </ul>
  </div>

  #main_nav {
width:74.7em;
height:2.3em;
position:absolute;
top:13.9em;
left:0;
background:#000;
margin:0 0 0 6.9em;
text-align:center;
  }

 #main_nav ul {
width:49em;
height:1.7em;
color:#FFF;
font-size:1.3em;
letter-spacing:.2em;
text-alight:left;
margin:0 auto 0 auto;
}

#main_nav ul li {
display:inline;
list-style-type:none;
}

#main_nav ul li a {
display:block;
height:1.6em;
float:left;
color:#FFF;
text-decoration:none;
margin:0em 0 0 4em;
padding-top:.2em;
}

#main_nav ul li:first-child a {
margin-left:0.5em;
}

#main_nav ul li a:hover {
background-color:#90F;
}

谢谢

【问题讨论】：

能否提供更多信息？
您能发布一些代码以便可以回答问题吗？这有点模糊。
是的，我们肯定需要在这里查看一些 HTML。

标签： css

【解决方案1】：

我没有要测试的 Mac，但这个 CSS 似乎可以在 Windows 上的 Safari、Chrome、Firefox、Opera 和 Internet Explorer 中解决问题。（我只贴了修改的部分）

#main_nav {
    width:74.7em;
    height:2.3em;
    margin:13.9em auto 0;
    background:#000;
    text-align:center;
}

#main_nav ul {
    width:49em;
    height:1.7em;
    color:#FFF;
    font-size:1.3em;
    letter-spacing:.2em;
    text-alight:left;
    margin:0 auto;
}

小事... #main_nav ul 中的这一行是多余的，因为缩写形式允许您指定前两个并将相同的值应用于相反的两侧：

margin:0 auto 0 auto;

所以，等效的版本是：

margin:0 auto;

【讨论】：