在chrome,mozilla和IE中打印网页预览它没有正确显示

时间:2014-08-25 12:24:31

标签: html css print-preview

Images screen shots from IE,chromr,Firefox我想打印A4尺寸的网页。目前我使用了@page{size:auto},@media print{}。我需要每个页面都有边框,它应该完成使用分页符。在某些浏览器中,打印预览功能正在破裂请帮帮我。

我的代码:

@media print{

    @page{size: auto;
        margin:0px 0px 20px 0px;}

    .pagebreak {
  page-break-before: always;
}




body, h1, h2, h3, ol, ul, div {     width: auto;     border: 0;     margin: 0;     padding: 0;     float: none;     position: static;     overflow: visible; }
.header, .event_sidebar, .detail_header, .detail_img, .action_button, #ev_map, .related_eve, .footer{display: none;}
    .event_container{

    max-width:730px;
    width:100%;
    height:auto;
    margin:0px auto;
    outline: none;
    border:double;
    position:relative;
}

.event_print_header {
    height: auto;
    max-width:730px;
    width: 98%;
   margin:0px auto;
   position:relative;
}
.event_print_header img{width:99.99%;}
.event_contentarea{
    width: 100%;
    margin: 0px;
    padding:0px; 
}
.event_contentarea h3
{
    margin:20px 55px 2px;
    color:#28a7ba;
    font-size:18px;
}

.blue_border{
    margin:0px 40px 10px;
    border:4px solid #28a7ba;
    padding: 30px 15px;
    color: #525252;

}
.blue_border > p {
    margin: 0;
}
.detail_left{
    text-align:center;
    margin:-30px 40px;
    position:relative;
}
.dateright{
    text-align:left;
    margin:0px auto;
    width:250px;
    color: #525252;
    font-family: "HelveticaNeue";
    font-size: 17px;
    line-height: 25px;
    color:#000033;
}
.eve_cat{
    color: #000;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    text-transform:uppercase;
    text-decoration:underline;
}
.detail_title{
    color: #000;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    padding:28px 0px;
}
.speaker_img{
    float: left;
    height: 160px;
    margin: 10px;
    width: 150px;
}
.speaker_img img {
    height: 150px;
    width: 150px;
}
.speaker_top{
    float:left;
    width: 100%;
    height:auto;
}
.speaker_name{
    color: #000;
    font-size: 130%;
    font-weight: 900;
    margin: 50px 0 2px;
    text-align: left;
}
.speaker_designation {
    color: #000;
    font-size: 110%;
    font-weight: normal;
    margin-bottom: 5px;
    text-align: left;
}
.speaker_content{
    color: #000;
    font-family: "HelveticaNeue";
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
    text-align: left;
}
.detail_title > a {
    color: #000;
    text-decoration: none;

}
.eventinvite_print{
    color: #000;
    margin: 0 40px 10px;
    padding: 0px 15px;
    font-style: italic;
}
.event_print_footer {
    background:  #42cad6;
    line-height: 18px;
    margin-top: 10px;
    padding: 15px 0;

}
.footerevprint {
    margin: 0;
    text-align: center;
    color: #21281d;
    font-size: 16px;
}
}

提前致谢

enter image description here

enter image description here

0 个答案:

没有答案