使用ons-tabbar或ons-navigation时页面损坏

Question

当我按键盘上的Tab键时，布局将被破坏。我使用来自monaca的onsenui框架。请帮我检查一下情况。

main.html

  <ons-tabbar var="globalFooter" id="globalFooter">
    <ons-tab page="top/navigator.html" active>
      <span style="font-size: 12px"><img src="img/A_1.png" alt="Top" style="height: 100%"></span>
    </ons-tab>

    <ons-tab page="infomation/list.html">
      <span style="font-size: 12px"><img src="img/A_2.png" alt="重要情報" style="height: 100%"></span>
    </ons-tab>

    <ons-tab page="negotiation/list.html">
      <span style="font-size: 12px"><img src="img/A_3.png" alt="商談" style="height: 100%"></span>
    </ons-tab>

    <ons-tab page="project/list.html">
      <span style="font-size: 12px"><img src="img/A_4.png" alt="案件" style="height: 100%"></span>
    </ons-tab>

    <ons-tab page="building/list.html">
      <span style="font-size: 12px"><img src="img/A_5.png" alt="館カルテ" style="height: 100%"></span>
    </ons-tab>
  </ons-tabbar>

project / list.html

<ons-page id="project-page-list-area">
　<ons-navigator var="project_navi" id="project_navi" page="../search.html"></ons-navigator>
</ons-page>

building / list.html

<ons-page id="building-page-list-area">
  <ons-navigator id="building_navi" var="building_navi" page="../search.html"></ons-navigator>
</ons-page>

When i focus here

Next layout be broken