Question

我正在尝试设计这个应用程序，其中有一个工具栏和一个扩展程序以提供更多背景，它在android上看起来很完美，但在ios上，它的底部有一些难看的边框。

我尝试更改默认属性（无边界，--border-width），但是没有用。

我的HTML：

   <ion-header no-shadow no-border>
      <ion-toolbar class="header">
        <ion-buttons slot="start">
          <ion-menu-button color="light"></ion-menu-button>
        </ion-buttons>
        <ion-title class="g-text-center">
          <img class="logo" src="assets/icon/logo.svg">
          <ion-label class="title">some title</ion-label>
        </ion-title>
      </ion-toolbar>
    </ion-header>

我的CSS：

.header{
    --background: linear-gradient(to right, #625ad5, #7f51d0, #9746c8, #ac37be, #bf23b2);
    // background: linear-gradient(to right, #625ad5, #7f51d0, #9746c8, #ac37be, #bf23b2);
    opacity: 0.75;
    border: none !important;

}
.header-extension {
    background: linear-gradient(to right, #625ad5, #7f51d0, #9746c8, #ac37be, #bf23b2);
    height: 50px;
    opacity: 0.75;
}

Answer 1

我认为问题可能出在css specificity中。根据我的研究，我认为您更改--border-width的原始解决方案是正确的，但是仅将其放在.header类上是不够具体的，因为正在应用--border-width的选择器被使用的是

.header-ios ion-toolbar:last-child

因此，如果您使用此选择器删除边框，则应该可以使用。如果您希望它在您的应用程序中使用，则将其放在global.scss文件中


.header-ios ion-toolbar:last-child {
  --border-width: 0;
}

如果只希望在某些页面上使用它，我建议像这样向工具栏添加一个类

<ion-toolbar class="no-border">
 ...
</ion-toolbar>

并选择它


.header-ios ion-toolbar.no-border:last-child {
  --border-width: 0;
}

或者提出自己的选择器，其特异性要高于应用边界的基础选择器，也许是ion-header本身的选择器。

Answer 2

已解决：问题不在于sccs或任何属性都可以正常工作，但是当在chrome中服务离子应用程序时，缩放比例未达到100％，这导致出现了这些意外像素，因此在实际设备上可以正常工作

如何从ios中的工具栏删除边框？

2 个答案: