首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用最小高度离子输入的铬打印混叠

使用最小高度离子输入的铬打印混叠
EN

Stack Overflow用户
提问于 2018-12-07 04:45:23
回答 1查看 21关注 0票数 0

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

打印到pdf (打印预览和打开保存的pdf)在Firefox v63中看起来很好,

但在Chrome v70中,当我设置min-height时,它会产生锯齿或整行缺失,而不管chrome页面边距是None还是Default。我还看到它删除了id、描述、子项名称或价格行,如果它们落在分页间隙中。

有没有办法防止Chrome在自动换页/换页时出现锯齿或掉线?

--

代码:

代码语言:javascript
代码运行次数:0
运行
复制
@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;
    }
}
代码语言:javascript
代码运行次数:0
运行
复制
<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>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53659407

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档