Question

我正在使用@media print样式来压缩ion-input的庞大页面，以将页面数减少15页。

在Firefox v63中，打印为pdf（打印预览并打开保存的pdf）看起来不错，

但是在Chrome v70中，当我设置min-height时，无论Chrome页面的页边距为None还是Default，它都会产生混叠或整行缺失。我也已经看到，如果它们落在分页符间隙中，它会删除id，描述，子项目名称或价格行。

有没有一种方法可以防止Chrome在其自动换行/换行符周围出现锯齿或掉线？

-

代码：

@media print {
    ion-item, .item-inner, .input-wrapper, ion-input, input  {
        min-height: 23px !important; // causes line aliasing
        height: 24px !important;
        max-height: 25px !important;
        line-height: 26px !important;
    }
}

<ion-card *ngFor="let eachCard of myCards">
  <ion-row>
    <ion-col col-2>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.id"></ion-input>
        </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col col-11>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.description1"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.description2></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" [(ngModel)]="eachCard.description3"></ion-input>
        </ion-item>
    </ion-col>
  </ion-row>

  <div *ngFor="let eachSubitem of eachCard.subitems">
    <ion-row>
      <ion-col col-1></ion-col>
      <ion-col col-5>
          <ion-item>
              <ion-input type="text" [(ngModel)]="eachSubitem.name"></ion-input>
          </ion-item>
      </ion-col>
      <ion-col col-5>
          <ion-item>
              <ion-input type="text" [(ngModel)]="eachSubitem.altName"></ion-input>
          </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col col-1></ion-col>
      <ion-col col-3>
          <ion-item>
              <ion-input type="number" [(ngModel)]="eachubitem.price"></ion-input>
          </ion-item>
      </ion-col>
      <ion-col col-7>
          <ion-item>
              <ion-input type="text" [(ngModel)]="eachSubitem.unit"></ion-input>
          </ion-item>
      </ion-col>
    </ion-row>
  </div>
</ion-card>

Answer 1

已解决：

ion-item  {
    display: inline-block !important;
}

带有最小高度离子输入的Chrome打印混叠

1 个答案: