2

我需要在所有 :first 和 :right 页面的右侧显示一个“标签”。选项卡必须位于所有页面上的相同位置。

这是我的模拟 HTML：

<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head/>
    <tab class="tab1">RG</tab>
    <body>
        <section>
            <p>All my content</p>.
        </section>
    </body>
</html>

不幸的是， :first 和 :right 页面有不同的边距，所以下面的 CSS 会导致选项卡根据页面位于不同的位置：

@page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
  }
}
tab{
    position:running(rightTab);
}
.tab1{
    margin-top:50mm;
}

是否可以根据页面选择器为 margin-top 设置不同的值？例如：首页 50 毫米，右页 90 毫米？

4

1 回答 1

1

没有接盘侠？这是我的看法。不，不能根据页面选择器更改属性的值。或者至少，我在规范中没有找到任何关于它的信息。

在类级别上是不可能的，但当然可以根据选择器更改页面的属性。

因此，我更改了页边距，以便选项卡现在显示在两个页面上的相同位置。相关区域（@page :first 的@right-top）上的属性 margin-top 现在设置为 -40mm，因此@page :first 区域中的有效边距相同（72 - 40 = 32mm）和@page：对。

@page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
  margin-top:-40mm;
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
  }
}
tab{
    position:running(rightTab);
}
.tab1{
    margin-top:50mm;
}

好吧，如果我再考虑几分钟，我可以在不发帖的情况下弄清楚。

于 2021-11-23T20:57:17.150 回答