标题栏中的离子搜索输入

Question

我不明白为什么输入文本在IOS模拟器中渲染时略微偏移到底部,并且在浏览器中定位正确.

代码很简单:

<ion-nav-title>
    <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input ng-model="search_text" type="text" placeholder="Search..." focus-me my-enter="search_model(search_text)" autofocus>
        </label>
    </div>
</ion-nav-title>

在这里,我附上了两个快照(在浏览器和IOS模拟器中):

什么是hapenning？

Answer 1

标题栏不应位于 ion-nav-title 内。实际上，如果您使用带有 class="bar header-bar" 的 div，您可以使用 class="title" 在内部声明标题。例如：

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

删除 ion-nav-title 标签应该可以解决该问题。