HTML元素在打印预览中显示时会出现错位

时间:2015-05-27 12:09:11

标签: javascript html image

我已经开发了html页面..在IE上看起来很好 但是当显示打印prievew时,所有的html元素都会被解除泄露,导致错过方向。

为什么这么有帮助。

以下是示例代码

<body onload="JavaScript:somefunction();">

<header> 

    <div id="headerIamge">               
       <img src="Images\\_logo.png" />                   
          </div>
     </header>

          <div id="sectionbody">
          <div id="buttonPanel">

              </div>
             </div>

              <div id="sectionheader">

                  <div id="title"></div>

              </div>
            <div id="parentAreaContent">

            </div>
         <table>
             <colgroup>
                 <col width="1200px" />
                 <col width ="5px" />
             </colgroup>
             <tr>
                 <td>
          <div id="navigation">

            <nav id="assetNavTargets">
                <ul>

                </ul>

            </nav>
                          </div>
          <div id ="deviceImage"></div>

               </td>
             </tr>
         </table>
     <br />
            <div id="MainContentArea"></div>
             </div>     
    </body>
    </html>

Css

  #divbox{
    margin-left:10px;
    margin-right:10px;
    background-color: #E6EAEC;
    border:1px solid #c0c0c0;

}

css元素使用px,而对于某些元素,我使用%来表示大小。

1 个答案:

答案 0 :(得分:0)

使用%px,否则打印预览将无法补偿可打印纸张的尺寸。
虽然这并不容易,但我可能会使用Javascript进行转换:

function xPercentToPixels(percentage) {
    return ((document.body.clientWidth / 100) * percentage) + "px";
}

function yPercentToPixels(percentage) {
    return ((document.body.clientHeight / 100) * percentage) + "px";
}

然后,您可以将所有%值更改为px,并且它应该更好地工作。