離子標題和子標題在瀏覽器和模擬器中不呈現相同

Question

我在我的應用程序中使用了標題和子標題。我創建的HTML看起來像這樣：

<ion-header-bar class="bar-dark"> 
    <a ui-sref="main.logout" class="button button-icon icon ion-navicon"> 
    </a> 
    <a class="button button-icon icon ion-ios-search"> 
    </a> 
    <a class="button button-icon icon ion-person"> 
    </a> 
    </ion-header-bar> 
    <ion-header-bar class="bar-subheader bar-dark"> 
    <a href="#">Populært 
    </a> 
    <a href="#">Siste 
    </a> 
    </ion-header-bar> 

，當我在瀏覽器中測試應用程序（鉻），它看起來幾乎一樣，我希望它的樣子，但是當我使用模擬器適用於iOS，頭和子頭看起來比他們應該做的更大。

這是瀏覽器的截圖：

這是從模擬器所採取的截圖：

這是此頁我SCSS文件：

.bar.bar-dark{ 
    display: inline-block; 
    height: 45px; 
    padding-top:0; 
    background-color: $dark-background-color; 
    color:$light; 
    border-color: $dark-background-color; 
    background-image: none; 

    .row{ 
     padding-top:0; 

     .icon{ 
      font-size: 2rem; 
     } 
     .ion-navicon{ 
      font-size: 3rem; 
     } 
     .right{ 
      padding-top:16px; 
     } 
    } 

    a{ 
     color:$light; 
     text-decoration: none; 

     &:active{ 
      color:$gray; 
     } 
    } 
} 

.bar-subheader { 
    top: 45px; 
} 

.has-subheader { 
    top: 90px; 
} 

.item-light { 
    .article{ 
     img{ 
      width: 100%; 
     } 

     h1 { 
      color: $light; 
      position: absolute; 
      bottom: 5rem; 
      text-align: center; 
      width: 100%; 
      margin: 0 auto; 
      font-size: 2rem; 
      padding: 0 10%; 
     } 
    } 
    .row{ 
     padding:.7rem; 

     a{ 
      font-size: 1.1rem; 

      i { 
       vertical-align: middle; 
       font-size: 2.1rem; 
      } 
     } 
    } 
} 

這是所有網頁我SCSS文件：

body{ 
    background-color: $dark-background-color; 
} 

.item { 
    border: 0; 
} 

.item-content { 
    padding:0!important; 
} 

.right{ 
    text-align: right; 
} 

//Buttons 
.button{ 
    min-height: 60px; 

     &:active, &:hover{ 
      border-color:transparent; 
     } 
} 

//Customizing Ionic Icons 
.icon{ 
    color:white; 
    vertical-align: middle; 
} 

.ion-ios-heart-outline, .ion-ios-heart { 
    font-size: 1.7rem; 
    color: $red; 
} 

.ion-ios-chatbubble, .ion-chevron-right { 
    font-size: 1.7rem; 
    color: $gray; 
} 

.ion-chevron-left { 
    font-size: 2rem; 
    color: $light; 
    margin: 10px; 
    position:absolute; 
    top:15px; 
    z-index:1; 
} 

.ion-social-facebook { 
    font-size: 1.7rem; 
    color: $gray; 
} 

.popup-head { 
    background-color : $dark-background-color; 
    border: 0; 

    .popup-title { 
    font-size: 16px; 
    } 
} 

更新代碼

我在希望覆蓋默認扎頭類改類不同的名稱。這是我的CSS：

.articles-header { 
    display: inline-block; 
    padding-top:0; 
    height: 45px; 
    background-color: $dark-background-color; 
    color:$light; 
    border-color: $dark-background-color; 
    background-image: none; 

    a{ 
     color:$light; 
     text-decoration: none; 
     font-size: 3rem; 

     &:active{ 
      color:$gray; 
     } 
    } 

    .right-icons { 
     float: right; 
    } 
} 

.articles-subheader { 
    top: 45px; 

    a { 
     font-size: 1rem; 
    } 

    .button:hover { 
     color:$light; 
    } 
} 

.has-subheader { 
    top: 90px; 
} 

這是我的html：

<div class="row articles-header"> 
    <a ui-sref="main.logout" class="button button-icon icon ion-navicon-round"> 
    </a> 
    <div class="right-icons"> 
     <a class="button button-icon icon ion-ios-search-strong"> 
     </a> 
     <a class="button button-icon icon ion-person"> 
     </a> 
    </div> 
    </div> 
    <div class="row articles-subheader articles-header"> 
    <a class="button button-icon" href="#" ng-click="ShowHideBulletpoint('siste')"><i class="ion-ios-circle-filled" ng-show="bulletpointSiste"></i> Siste 
    </a> 
    <a class="button button-icon" href="#" ng-click="ShowHideBulletpoint()"><i class="ion-ios-circle-filled" ng-show="bulletpointPopular"></i> Populært 
    </a> 
    </div> 

但最後由托米斯拉夫與建議行之有效。我想知道的是，如果現在要改變高度，我應該在Tom Tom的寫作中改變它的值，並且這個值只是用來覆蓋但不會改變高度，或者我應該改變文章中的高度-header ，文章 - subheader類？

Answer 1

離子使用平臺的檢測來決定的標頭應多高是。 因此，要覆蓋它，你需要使用整個正確的CSS選擇器。

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) { 
    height: 64px; } 
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper { 
    margin-top: 19px !important; } 
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * { 
    margin-top: 20px; } 
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top { 
    top: 64px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader { 
    top: 64px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader { 
    top: 108px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs-top { 
    top: 113px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top { 
    top: 157px; } 
.platform-ios.platform-cordova.status-bar-hide { 
    margin-bottom: 20px; } 

Answer 2

在ion-content添加class = "has-subheader"我希望這能解決你的問題