離子頭是不是在iOS正確顯示（iPhone）平臺

Question

我有一個自定義酥料餅的窗口下面的模板：

<ion-popover-view class="customPopup"> 



    <ion-header-bar class="bar bar-header"> 
    <h1 class="title">Available sounds</h1> 
    </ion-header-bar> 

    <ion-tabs class="tabs-icon-only tabs-top tabs-positive"> 

    <ion-tab title="{{ 'SOUNDS' | translate }}"> 

     <ion-content class="has-header"> 
     <div class="item item-button-right" ng-repeat="sound in availableSounds"> 
      {{sound.name}} 
      <button class="button button-positive" ng-click="addSoundToSelection({{$index}})"> 
      <i class="icon ion-plus-circled"></i> 
      </button> 
     </div> 

     </div> 


     </ion-content> 

    </ion-tab> 

    <ion-tab title="{{ 'PRE-PREPARED_MIX' | translate }}"> 

     <ion-content class="has-header"> 
     <div class="item item-button-right" ng-repeat="sound in availablePrepreparedSounds"> 
      {{sound.name}} 
      <button class="button button-positive" ng-click="addSoundToSelection({{$index}})"> 
      <i class="icon ion-plus-circled"></i> 
      </button> 
     </div> 
     </ion-content> 

    </ion-tab> 
    </ion-tabs> 

</ion-popover-view> 

它產生於瀏覽器和Android，但在iOS模擬器結果損壞成功的結果（見下圖）。

我怎麼能解決這個問題嗎？

非常感謝您的任何建議。

Answer 1

爲了適應iOS 7+中的透明狀態欄，Ionic的CSS將標題欄向下推動20px。看起來Ionic團隊忘了彈出窗口中也存在標題欄。我想在此期間，您可以使用類似於下面的樣式來覆蓋您的彈出式頁眉欄的樣式。

.platform-ios.platform-cordova:not(.fullscreen) .popover .bar-header > * { 
    margin-top: 0; 
} 

.platform-ios.platform-cordova:not(.fullscreen) .popover .bar-header { 
    height: 44px; 
} 

.platform-ios.platform-cordova:not(.fullscreen) .popover .has-header { 
    top: 44px; 
}