Php工作表在尝试打印时看起来不同？_Php_Css_Printing

Php工作表在尝试打印时看起来不同？

php css printing

Php工作表在尝试打印时看起来不同？,php,css,printing,Php,Css,Printing,我使用Css样式表将文本框放在正确的位置，在crome中，文本框和句子看起来很好，一切都在正确的位置，但是当尝试使用ctrl+p打印站点时，每个句子和每个文本框都会移动，我该怎么做才能使它看起来一样  <!-- #txtfeld_1 { position:r

我使用Css样式表将文本框放在正确的位置，在crome中，文本框和句子看起来很好，一切都在正确的位置，但是当尝试使用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>';

打印“Absender类型/发货人类型：”；

您已经有了这样的功能：

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

#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，您使用的是静态测量。

使用@media print定义仅用于打印的css和/或强制保持位置。浏览器在准备打印时，默认情况下会丢弃一些内容。使用media print时，TXTBOX会改变其位置，我是否必须将它们重新对齐然后打印？将您的普通css复制到@media print块中，这应该足以获得“相同位置”的内容，但其他一些内容（如容器宽度）可能会改变这一点，所以试着像posiblenever used media一样明确：那么我应该把@media print{这里是我所有的其他css块？}并将incluse更改为media=“print”？您已经包含了一个css文件，不要指定媒体。然后做

@media print{*复制所有其他css块，或者你想在打印版本中使用相同的块*}

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