ios - Ionic CSS 样式在部署到 iOS 时关闭，但在其他地方都很好

Question

所以当我在 Android 手机和浏览器中查看我的应用程序时， header (和子 header )如下所示

当我在 iOS 模拟器上运行，或者部署到 iOS 手机时，它看起来像下面这样:

标记如下所示

        <ion-header-bar class="bar item-input-inset search">
                <div class="buttons buttons-left header-item">
                    <span class="left-buttons">
                  <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
                  </button>
                </span>
                </div>
                    <label class="item-input-wrapper search">
                        <input placeholder="Search..." ng-model="model.searchTerm" ng-change="updateSearchTerm(model.searchTerm,model.quickSearchType)" type="text">
                    </label>
                    <button class="button button-clear" ng-click="clearSearch()">
                    <i class="icon" ng-class="{'ion-close':model.searchTerm.length > 0}"></i>
                  </button>
         </ion-header-bar>
         <ion-header-bar class="bar bar-sub-header item-input-inset action-sub-header">
             <button ng-style="model.quickSearchType == 'featured' && {'font-weight': 'bold'}"
                             style="color:#fff;"
                             class="button button-clear col col-33"
                             ng-click="quickSearch('featured',model.searchTerm)">
                 FEATURED
             </button>
             <button class="button button-clear col col-33"
                             ng-style="model.quickSearchType == 'nearby' && {'font-weight': 'bold'}"
                             style="color:#fff;"
                             ng-click="quickSearch('nearby',model.searchTerm)">
                 NEARBY
             </button>
                 <button class="button button-clear col col-33"
                             style="color:#fff;"
                             ng-style="model.quickSearchType == 'recent' && {'font-weight': 'bold'}"
                             ng-click="quickSearch('recent',model.searchTerm)">
                     RECENT
                 </button>
         </ion-header-bar>

我的 CSS 如下:

.action-sub-header {
   background-color: #007fff;
}

.item-input-inset {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        padding: 10.66667px;
    }


    .bar-header {
        top: 0;
        border-top-width: 0;
        border-bottom-width: 1px;
    }

    .bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 9;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    height: 44px;
    border-width: 0;
    border-style: solid;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #ddd;
    background-color: white;
    /* border-width: 1px will actually create 2 device pixels on retina; */
    background-size: 0;
}

Answer 1

ion-header-bar 在 ios 上有一个特定的 css，可以在其顶部为 iOS 状态栏添加空间。你必须在你的情况下覆盖它。

要在浏览器中测试 ios 特定的 css，请编辑 body 标签上的类。将 platform-b​​rowser 替换为 platform-ios 并将 platform-macintel 或 platform-windows 替换为 paltform- Cordova 。

完成后，您将能够看到 ionic css 应用的特定样式:

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 20px;
}

你只需要覆盖它。