添加填充在Chrome和Firefox的工作不同於它是在Safari

Question

什麼我正在

我的網站上，導航欄不會在頁面的頂部開始，代替它的是一點點地向下頁面，標題/橫幅下。當用戶向下滾動瀏覽欄時，我將其位置修改爲固定位置，以便在滾動瀏覽內容的其餘部分時，該頁面現在保持在頁面頂部可見。

我想這看起來真的無縫隙，所以，當導航欄會變成固定，我想補充一些填充的主要內容，以從跳躍成在導航欄是空停止它。我在我的JavaScript中做了所有這些，使用jQuery爲特定元素添加類和樣式。

---

的問題

在Safari中，我的代碼工作完美！我遇到的問題是，在Chrome和Firefox上，似乎需要添加比我在Safari上更多的填充。在Chrome和Firefox上，導航欄變得固定後，內容仍然會略微跳躍。在嘗試不同的值的同時，我發現在這些瀏覽器上，我需要20個額外的填充才能實現無縫轉換，但隨後Safari上的內容跳得太快了！

爲什麼這個微胖需要在某些瀏覽器而不是Safari瀏覽器？

如果有人可以幫助我將非常感激，因爲這實在是煩我！我不知道爲什麼這在不同的瀏覽器中表現不同。

這裏是一個代碼段。我試圖儘量減少重新創建問題所需的代碼量，但是CSS有點冗長，因爲我認爲我最好將其全部包含在內，以防造成問題。

----- -----編輯

OK我才發現，這是導致問題的因素是我.navbar-button我沒有在我原來的片段包括。我現在添加了它。這是在不同瀏覽器中表現不同的東西。

我不得不邊距添加到這個元素，因爲它不是沒有它正確Chrome或Firefox的定位，而在Safari它的定位就好了。

這額外的保證金是什麼原因造成的問題。

$(document).ready(function() { 
 

 
    var $navBar = $(".navbar"); 
 

 
    $(window).scroll(handleScroll); 
 

 
    function handleScroll() { 
 
    fixNavbarToTopIfNecessary(); 
 
    } 
 

 
    function fixNavbarToTopIfNecessary() { 
 
    var bannerHeight = $("#banner").outerHeight(); 
 

 
    //When user scrolled past the initial position of the navbar 
 
    if ($(window).scrollTop() > bannerHeight) { 
 

 
     $navBar.addClass("navbar-fixed"); 
 
     $("#content").css("padding-top", $navBar.outerHeight() + "px"); // So that the content doesn't jump underneath the fixed nav. 
 
    } else { 
 
     $navBar.removeClass("navbar-fixed"); 
 
     $("#content").removeAttr("style"); 
 
    } 
 
    } 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
html { 
 
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
 
    font-weight: normal; 
 
    color: #888; 
 
    -webkit-text-size-adjust: 100%; 
 
    /* Prevent font scaling in landscape while allowing user zoom */ 
 
} 
 
body { 
 
    line-height: 1.5; 
 
    font-size: 14px; 
 
} 
 
html, 
 
body, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
ul, 
 
p, 
 
img { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-weight: normal; 
 
} 
 
button { 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.row::before, 
 
.row::after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.row::after { 
 
    clear: both; 
 
} 
 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
} 
 
.column { 
 
    display: block; 
 
    float: left; 
 
    min-height: 1px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
.s12 { 
 
    width: 100%; 
 
} 
 
p { 
 
    margin-top: 10px; 
 
    margin-bottom: 20px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 
section { 
 
    padding: 50px 0; 
 
} 
 
.container { 
 
    width: 970px; 
 
} 
 
#banner { 
 
    background-color: #794f29; 
 
    width: 100%; 
 
    height: 600px; 
 
    padding: 150px 0; 
 
    position: relative; 
 
    text-align: center; 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
} 
 
.banner-intro { 
 
    width: 50%; 
 
    float: right; 
 
    right: 5%; 
 
    top: 50%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    transform: translateY(-50%); 
 
} 
 
.banner-intro-heading { 
 
    color: white; 
 
    font-size: 60px; 
 
    text-shadow: 0 0 5px #ffecb0; 
 
    margin-bottom: 10px; 
 
} 
 
.banner-intro-lead { 
 
    color: white; 
 
    font-size: 24px; 
 
} 
 
.btn { 
 
    background-color: #a16fff; 
 
    border: 1px solid #8748ff; 
 
    color: #fff; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    padding: 15px 30px; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    letter-spacing: 1px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    transition: .3s; 
 
    cursor: pointer; 
 
} 
 
.btn:hover { 
 
    background-color: #a16fff; 
 
    color: white; 
 
    border-color: #8748ff; 
 
} 
 
.banner-intro-button { 
 
    margin-top: 30px; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3); 
 
} 
 
.navbar { 
 
    -webkit-font-smoothing: subpixel-antialiased; 
 
    /* this stopped the font weight from changing when the navbar is fixed */ 
 
    width: 100%; 
 
    height: 60px; 
 
    background: rgba(255, 236, 176, 0.97); 
 
    line-height: 60px; 
 
    display: block; 
 
    position: relative; 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
    z-index: 99; 
 
    transform: translateZ(0); 
 
    /* hack to make sure the navbar is repainted when it's set to a fixed-navbar on iOS */ 
 
} 
 
.navbar-fixed { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.navbar-brand { 
 
    font-family: "Merienda", cursive; 
 
    display: inline-block; 
 
    padding: 0 15px; 
 
    font-size: 18px; 
 
    float: left; 
 
} 
 
.navbar-items { 
 
    float: right; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
nav li { 
 
    display: block; 
 
    float: left; 
 
} 
 
nav a { 
 
    position: relative; 
 
    display: block; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    color: #794f29; 
 
    transition: .3s; 
 
    padding: 0 25px; 
 
} 
 
.navbar-button { 
 
    background-color: #a16fff; 
 
    border-color: #8748ff; 
 
    padding: 8px 10px; 
 
    margin: 10px 15px; 
 
    line-height: normal; 
 
    box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2); 
 
} 
 
.featured { 
 
    text-align: center; 
 
} 
 
.featured-title { 
 
    font-size: 40px; 
 
    margin-bottom: 1.5rem; 
 
    color: #ccaa8c; 
 
} 
 
.featured-subtitle { 
 
    font-size: 22px; 
 
    margin-bottom: 1.5rem; 
 
    color: #666; 
 
} 
 
.featured .lead { 
 
    line-height: 2; 
 
    font-size: 16px; 
 
    margin-bottom: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 

 
    <section id="banner"> 
 
    <div class="banner-intro"> 
 
     <h1 class="banner-intro-heading">Grand Title!</h1> 
 
     <p class="banner-intro-lead">Lorem ipsum lorum ipsum sausage rat cake mammoth hair.</p> 
 
     <a class="btn banner-intro-button" href="#">Call to Action</a> 
 
    </div> 
 
    </section> 
 

 
    <nav class="navbar"> <!-- This is what I add the navbar-fixed class to --> 
 
    <div class="container"> 
 
     <a href="#" class="navbar-brand">Brand</a> 
 
     <div class="navbar-items"> 
 
     <ul> 
 
      <li><a href="#">Link1</a> 
 
      </li> 
 
      <li><a href="#">Link2</a> 
 
      </li> 
 
      <li><a href="#">Link3</a> 
 
      </li> 
 
      <li><a href="#">Link4</a> 
 
      
 
       <li><a class="btn navbar-button" href="#">Button</a></li> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
</header> 
 

 
<main id="content"> <!-- This is what I add the padding to --> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 

 
     </div> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 
     </div> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 
     </div> 
 
     <div class="column s12"> 
 
     <section class="featured"> 
 
      <h2 class="featured-title">Featured Title</h2> 
 
      <h3 class="featured-subtitle">Featured Subtitle</h3> 
 
      <p class="lead">Lots of info about said feature that rambles on forever and forever.</p> 
 
      <p class="lead">Even more info blablablablalblablabla.</p> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</main>

Answer 1

我發現你的問題，有兩種解決方案（使用他們每個人就足夠了）。

方法1）變化margin-top和.navbar-button到0margin-bottom（防止垂直邊距崩潰......），並使用vertical-align: middle;爲中心，其垂直：

.navbar-button { 
    background-color: #a16fff; 
    border-color: #8748ff; 
    padding: 8px 10px; 
    margin: 0 15px; /* *** margin top & bottom are changed to zero! */ 
    vertical-align: middle; /* *** this is new! */ 
    line-height: normal; 
    box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2); 
} 

---

方法2）從.btn類中刪除display: inline-block：

.btn { 
    background-color: #a16fff; 
    border: 1px solid #8748ff; 
    color: #fff; 
    /* display: inline-block; */ /* *** this is removed! */ 
    ... 
} 

很明顯，如果你不想改變默認樣式爲.btn，您可以手動將display: block添加到導航欄按鈕中作爲內聯樣式（style="display: block;"）或使用新的CSS類（例如：.block）f或者它。

<li> 
    <a class="btn navbar-button" href="#" style="display: block;">Button</a> 
</li>