水平导航列表在chrome中相互重叠

Question

如果你在Firefox中查看它，一切都很好。

但在Chrome中导航重叠。

如果我更改它在chrome中的字体。

没有更改字体的任何解决方案？

这是以下网站

http://www.arckai.com/samcode/

  <ul id="nav2">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  </ul>  

  #nav2 {
  float: right;
  line-height: 3em;
  padding-right: 0.5em;
  font-size:100%
  }
  #nav2 ul li {


  }
  #nav2 li {
  display: inline-block;
  font-family: franchise;
  font-size: 1em;
  margin-left: 0.7em;
  }
#nav2 a:link {
color: #FFFFFF;
outline: 0 none;
text-decoration: none;
}
#nav2 a:visited {
color: #FFFFFF;
}
#nav2 a:hover {
 color: #2F8FC4;
 transition: all 0.1s ease 0s;
}
 #nav2 a:active {
 }

Answer 1

在How To Use @FontFace上查看这篇文章。请注意format的使用。将@ font-face声明更改为：

@font-face {
    font-family: "franchise";
    src: url("../Fonts/Franchise-Bold.ttf") format("truetype");
}

我没有对此进行测试，但可以帮助

Answer 2

#nav2 li {
    display: inline-block;
    font-family: franchise;
    font-size: 1.5em;
    margin-left: 0.7em;
    float: left;
    padding: 10px;
    width: 50px;
}

Working Fiddle

在IE11和Chrome版本32.0.1700.102中测试

问题还在于您添加的字体检查