ionic4 標題欄 ion-toolbar 默認 底部會顯示一個底邊框 解決

在ionic的官方文檔（https://ionicframework.com/docs/api/toolbar）中提到：

In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top.

大意就是在md模式下ion-header底邊會顯示一個陰影，ion-footer會在頂邊顯示一個陰影，在ios模式ion-header會顯示一個底邊，而ion-footer會顯示一個頂邊。

這段說明是在ion-toolbar組件中的，而內容說的就是ion-header，我不知道是不是官方的錯誤。

 

在chrome瀏覽器下測試，我是用的macbook，並且開發者工具中選的手機類型是iphone，所以<ion-toolbar> 默認被渲染為ios模式 。

但不管是ios,還是md模式，標題欄下邊都會顯示一個黑邊。而且不管我怎么設--border-width:0 還是 border-style: none，都不能徹底去掉。

經過我不斷的嘗試，最后發現只要給ion-toolbar加上以下兩個樣式就可以去掉這個下邊框：

--border-width: 0;
--min-height: 50px;

對於iphone X, --min-height: 設為 小於45 或大於45的偶數，都可以。

如果是要對全局進行設置，則修改 src/global.scss, 在其中加上

  ion-toolbar {
    --min-height: 50px;
    --border-width: 0 !important;
  }

 

以上都是在PC端的Chrome測試得到的結論，真機上還有待測試。