Question

我正在为Ionic-Framework中的移动设备开发混合App。我尝试使某些HTML跨度在某种程度上对于定义的区域看起来是透明的。 HTML和CSS在每个Android设备上都能正常工作，但在每个Apple设备上显示都非常无用。这意味着阴影不透明度和相关的HTML元素突然显示在视图中的完全不同的位置。不透明度有时会影响整个页面。当我从视图中删除相关的HTML时，一切都很好，这让我怀疑safari只是无法按照我想要的方式解释我的代码。

我怀疑是一个狩猎虫或一些野生动物园的怪癖要对这个奇怪的展示负责。

这是如何在Android设备上显示它是正确的：https://ibb.co/diNxxw 以及它在每台iOS设备上的崩溃情况：https://ibb.co/eNfZcw https://ibb.co/jiPGqG

这是我的HTML

<ion-item>
                <ion-label class="label-left-filler" [ngStyle]="{'width': avgRatings[speise.id]?.ratingAverage ? (((avgRatings[speise.id]?.ratingAverage | roundDecimal : avgRatings[speise.id]?.ratingAverage)-1) * (25+5) +13) +'px' : 0 +'px' }">
                </ion-label>
                <ion-label class="label-rating">
                  <span class="span-rating">
                    <span class="span-emojicon">
                      <mat-icon class="mat-icon-one">sentiment_very_dissatisfied</mat-icon>
                      <span class='mat-icon-spacer'></span>
                      <mat-icon class="mat-icon-two">sentiment_dissatisfied</mat-icon>
                      <span class='mat-icon-spacer'></span>
                      <mat-icon class="mat-icon-three">sentiment_neutral</mat-icon>
                      <span class='mat-icon-spacer'></span>
                      <mat-icon class="mat-icon-four">sentiment_satisfied</mat-icon>
                      <span class='mat-icosxn-spacer'></span>
                      <mat-icon class="mat-icon-five">sentiment_very_satisfied</mat-icon>
                    </span>
                  </span>
                </ion-label>
                <ion-label class="label-right-filler" [ngStyle]="{'margin-left': avgRatings[speise.id]?.ratingAverage ? (avgRatings[speise.id]?.ratingAverage | roundDecimal : avgRatings[speise.id]?.ratingAverage) * (25+5) -3 +'px' : 0 +'px' }">
                </ion-label>
              </ion-item>

这是我对应的CSS

  .label-rating {
    position: fixed;
    padding-left: 15px;
    top: 0px;
    left: 0px;
    background: rgba(255, 255, 255, 0);
    z-index: 1;
  }
  .label-left-filler {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
  }
  .label-right-filler {
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
  }
  .mat-icon-one {
    background: radial-gradient(
      red $mat-icon-radial-gradient-inner,
      white $mat-icon-radial-gradient-outer
    );
  }
  span > .mat-icon {
    font-size: $mat-icon-font-size;
    width: $mat-icon-width;
    height: $mat-icon-height;
    color: rgb(0, 0, 0);
    -webkit-mask-size: cover;
  }
  h2 span.mat-icon-spacer {
    padding: 0 $mat-icon-spacer-padding;
    background: white;
  }

Answer 1

为了更加跨浏览器友好，您可以使用opacity元素，并使用特定于浏览器的设置来提高兼容性。

opacity: 0.5; /* Standard compliant browsers */
   -moz-opacity: 0.5; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0.5; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=50); /* For IE8 and earlier */

Safari浏览器中不同的CSS不透明度显示

1 个答案: