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

【问题标题】：Print preview shows one div in wrong position打印预览显示一个 div 位置错误
【发布时间】：2015-06-10 14:57:50
【问题描述】：

我在 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;
}

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

【问题讨论】：

你能在 jsfiddle 中重现这个吗？
不幸的是：-( 情节是使用 R、Shiny 和 Rstudio 创建的，并且 HTML 源代码不知何故不包含所有内容
我无法理解这个问题。具体来说，我不知道您所说的在屏幕上或印刷上是什么意思。不过，您的负边距顶部可能有问题。

标签： javascript html css

【解决方案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 已经拥有您所追求的定位关系。

【讨论】：

【解决方案2】：

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

【讨论】：