Safari 中的 CSS 渲染完全不同

Question

我正在制作我的第一页。我只使用 HTML 和 CSS。

我一直在使用外部样式表，并在 Chrome 和 IE 中进行检查。完成前 2 页后，我现在检查了 Firefox 和 Safari。它需要在 FF 中进行一些非常简单的调整，但在 Safari 中它呈现我的 CSS 的方式非常不同。

这是我的导航和标题部分的 html，我主要遇到的问题是：

<div id="logo">  <img src="images/logo no name.jpg" style="width: 50px">           </div>

<div id="jlc">   James Lucas Coaching    </div>

<div id="menu">     <nav>

                    <ul>
                    <li class="here">Home</li>
                    <li class ="coming"><span title="Coming soon!"><a>The Coach</a></li>
                    <li class="coming"><span title="Coming soon!"><a>The Process</a></li>  
                    <li class="coming"><span title="Coming soon!"><a>Packages</a></li>
                    <li><a href="Ccontact.html">Contact</a></li> 
                    </ul>
        </nav> </div>

</div>

还有 CSS：

#top {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
min-width: 688px;
height: 10%;
padding-left: 1%;}

#logo {
padding-top: 2%;
margin-top: none; 
width: 100%;
min-width: 45px;
-webkit-box-align: center;}

#jlc {
font-family:'Amatic SC', cursive;
font-size: 6.5vh;
color: #4c5d71;
width: 33%; 
min-width: 260px;
margin: none !important;}

#menu {
display: flex;
display: -webkit-flex;
-webkit-box-align: center;
align-items: center;
align-self: flex-end;
justify-content: flex-end;
width: 60%;
min-width: 800px;
float: right !important;
padding: 0% 0% 0% 0%;
margin: 0% 0% 0% 0%;}

ul {

float: right;
width: 100%;
padding-left: 9%;
padding-right: none !important;}


nav {
display: flex;
justify-content: flex-end;
float: right;}

li {

font-family: 'Cabin Sketch', cursive;
font-weight: 700;
font-size: 28px;
padding: 0vh 2vh 0vh 2vh;}

我意识到我可能犯了一个完全的新手错误，但我这辈子看不到它是什么。如您所见，我开始尝试使用 -webkit- 供应商前缀，但它们并没有什么不同。当我添加 display: -webkit-flex;到#top 它完全消失了。

我在想也许我可以只为 Safari 设置一个样式表，然后修复这些错误？然而，这似乎有点啰嗦，我在这里读到“浏览器嗅探”或任何它所称的东西都是不受欢迎的。

在我的主页下方，我有另一个 flexbox 元素在 Safari 中的行为与预期不符，但希望我能够根据您对上述内容的建议解决这个问题。

请对我放轻松！所有帮助表示赞赏。

Answer 1

用</span>关闭你的span标签，最后你有一个额外的</div>，因为你的jpeg徽标名称有空格，添加-或去掉空格

#top {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  min-width: 688px;
  height: 10%;
  padding-left: 1%;
}

#logo {
  padding-top: 2%;
  margin-top: none;
  width: 100%;
  min-width: 45px;
  -webkit-box-align: center;
}

#jlc {
  font-family: 'Amatic SC', cursive;
  font-size: 6.5vh;
  color: #4c5d71;
  width: 33%;
  min-width: 260px;
  margin: none !important;
}

#menu {
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  align-items: center;
  align-self: flex-end;
  justify-content: flex-end;
  width: 60%;
  min-width: 800px;
  float: right !important;
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
}

ul {
  float: right;
  width: 100%;
  padding-left: 9%;
  padding-right: none !important;
}

nav {
  display: flex;
  justify-content: flex-end;
  float: right;
}

li {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: 28px;
  padding: 0vh 2vh 0vh 2vh;
}

<div id="logo"> <img src="http://static1.squarespace.com/static/5473473ce4b01917866e9a9e/t/5474e24ce4b082d9d5ec8b04/1416946372557/Logo+C+Final.png" alt="coach"> </div>

<div id="jlc"> James Lucas Coaching </div>

<div id="menu">
  <nav>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>The Coach</span></a></li>
      <li><a href="#"><span>Process</span></a></li>
      <li><a href="#"><span>Packages</span></a></li>
      <li><a href="Ccontact.html">Contact</a></li>
    </ul>
  </nav>
</div>