尝试打印时，Php 表看起来不同？答案

【问题标题】：Php sheet looks different when trying to print?尝试打印时，Php 表看起来不同？
【发布时间】：2017-03-08 15:37:26
【问题描述】：

我使用 Css 样式表将我的文本框放在正确的位置，在 crome 中的 txtbox 和句子看起来很好，一切都在正确的位置，但是当尝试使用 ctrl+p 打印网站时，每个句子和每个文本框都会移动，我该怎么做才能让它看起来一样？：

<!--
#caption_1 {
position:relative;
left:-120px;
top:0px;
width:175px;
height:22px;
font-size:18px;

}
-->

<!--
#txtfeld_1 {
    position:relative;
    left:-100px;
    top:0px;
      width:175px;
    height:22px;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;  
}
-->

这里也是我的文本框示例：

print '<font size="4" id="caption_1" face="Calibri">Absender Typ / Shipper type:</font></div><input type="text" name="absenderTyp" value="'.$absenderTyp.'" id="txtfeld_1" readonly></div>';

【问题讨论】：

使用 @media print 定义 css 仅用于打印和/或强制保持位置。在准备打印时，浏览器默认会丢弃一些内容。
在使用媒体打印时，txtboxes 改变了它们的位置，我必须重新对齐它们然后打印吗？
将您的普通 css 复制到 @media 打印块中，这应该足以获得“相同位置”的东西，但其他一些东西（如容器宽度）可能会改变它，所以尽量做到尽可能明确
从未使用过媒体：所以我应该把@media print { 我所有其他的css块都放在这里吗？ } 并将包含更改为 media= “打印”？
你已经包含了一个css文件，不要指定媒体。然后做@media print { *copy of all your other css blocks or the ones you want to work the same in the printed version* }

标签： php css printing

【解决方案1】：

你已经有了这样的东西：

<head>
  <link rel="stylesheet" href="assets/css/styles.css">
</head>

还有一个这样的styles.css文件：

#caption_1 {
    position:relative;
    left:-120px;
    top:0px;
    width:175px;
    height:22px;
    font-size:18px;
}
#txtfeld_1 {
    position:relative;
    left:-100px;
    top:0px;
      width:175px;
    height:22px;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;  
}

在下面添加：

@media print {
    #caption_1 {
        position:relative;
        left:-120px;
        top:0px;
        width:175px;
        height:22px;
        font-size:18px;
    }
    #txtfeld_1 {
        position:relative;
        left:-100px;
        top:0px;
          width:175px;
        height:22px;
        font:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        text-align:center;  
    }
}

这应该会强制浏览器在您的页面的打印版本上使用相同的样式，从而（或多或少）为您提供与“屏幕”版本相同的结果。

请记住，通常以屏幕百分比表示的页面宽度等某些内容现在将根据页面宽度计算，但根据您发布的 css，您使用的是静态测量值。

【讨论】：

好吧，它至少工作了一点，现在我可以用“left: ...”移动它们，但是网站看起来总是一样的，然后我改变一个文本字段的位置，它看起来一样该网站但在打印弹出窗口中有所不同。
您需要重新更改媒体打印块以影响可打印版本和正常屏幕版本的正常块。
好吧 thx 它有效，但不是完美的，如果我尝试打印该站点，它在打印弹出窗口中看起来相同，但我现在看到打印时窗口变小了，所以文本把它剪掉了一点，如果我尝试只更改打印选项，那么在@media print 中只更改#caption_1 没有任何反应
你的意思是把“left:-120px”移到一个较低的值（比如-140左右）来补偿？