頁腳中的元素與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 。 就瀏覽器差異而言，這應該可以避免很多麻煩。