Question

我在javascript中创建了一个情节，并希望显示重叠情节的情节的图例。创建此图的功能不允许直接重叠图例，但是您可以将图例放在单独的div中。所以我做了这两个div：

<div id="ContainingLegend">
  <div id="VariablePlotLegend">
  </div
</div>

因此传说将放在div VariablePlotLegend中。

以下是我的两个相关CSS部分：

#ContainingLegend{
    text-align: center;
    margin-top: -73px; 
    margin-left: 60px;
    margin-right: 10px;
}

#VariablePlotLegend{
    padding: 3px;
    border-color: #004790;
    border-width: 1px;
    border-style: solid;
    background: #FFFFFF;
    width: auto;
    display: inline-block;
    position:relative;
    z-index:10;
}

在屏幕上，图例完美显示。在打印时，它显示在左侧的图表下方，全部为黑色，没有边框等。为什么？

Answer 1

边距不是我个人选择打印的。

尝试这样的事情：

<强> HTML：

<div class='container'>
  <figure id='MyPlotChart'>
    <!-- Whatever your plot chart HTML is -->
    <figcaption id='ContainingLegend'>
      <div id='VariablePlotLegend'>
        <!-- Legend HTML -->
      </div>
   </figcaption>
  </figure>
</div>

<强> CSS：

#MyPlotChart {
  position: relative;
}
#ContainingLegend {
  display: block;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

这为您提供了使用HTML在语义上正确的好处，figure和figcaption已经拥有了您所关注的关系。

Answer 2

看一下print css，也许是你正在使用它的工具之一，试图让它看起来更适合打印。 debugging print css with chrome

打印预览显示错误位置的一个div

2 个答案: