页脚中的元素与firefox和chrome不同

Question

所以我在不同的浏览器中测试网站时发现了一些奇怪的东西。在Firefox中，元素和h3标题位于同一行，但在Chrome元素中位于边框下方，与title元素不符。

<footer class="main-footer">
   <h3>Author1<a href="#home" class="foot-nav">BACK TO TOP</a></h3> 
</footer>

CSS：

    .main-footer a {
        text-decoration: none;
        font-size: .75em;
        float: right;
        color: #626262;
        padding-top: 3px;
        margin-top: -38px;
     }

Answer 1

您正在尝试定位内联元素。你最好定位一个内联块。

.main-footer a {
  text-decoration: none;
  font-size: .75em;
  float: right;
  color: #626262;
  padding-top: 3px;
  /*margin-top: -38px;*/
  display: inline-block;
}

http://codepen.io/vic3685/pen/rLqLAY

您会注意到在Firefox和Chrome中看起来相同。

另一方面，每个浏览器都有自己的样式表，这可能会导致事物的呈现方式不同。我建议您在CSS的开头使用重置css，如Eric Meyer's。这可以避免许多令人头疼的浏览器差异。