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测试得到的结论，真机上还有待测试。