Question

很高兴认识你

我正在使用html5和css3进行确认屏幕（我也使用引导程序）。突然我必须在IE9中应用它并能够打印它。我以为我已经解决了这个问题，但是在实际的IE9中效果不佳。在IE9打印预览中，他们渲染了100页。似乎并不取决于页面的长度。

有人经历过这种情况吗？您是如何解决的？

感谢您阅读，

凯伦

我试图制作print.css并写了链接 <href="css/print.css" rel="stylesheet" media="print">

##print.css##

body{width: 90%; height: auto; overflow: hidden;}
  h3 {margin-bottom: 20px;}
  .container-bottom{display: none;}
  .logout{display: none;}
  header{display: none;}
  .confirmation-btn-wrap{display: none;}
  footer{display: none;}
  .description-txt{display: none;}
  .contents{margin: 0;}
  .container{margin: 0 auto; height: auto;}
  .printBlock {page-break-before: always; margin-bottom: 0;}
  .printBlock::after {page-break-before: always; margin-bottom: 0;}
  .form-contents{padding: 0px;}

##original css##
.body{
    top: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.contents{
    width: 799px;
    margin: 40px auto 40px auto;
}
h3{
    margin-bottom: 30px;
}
header{
    background-image: url("../../../public/img/header.png");
    min-width: 100%;
    height: 139px;
    border-bottom: solid 10px #B5D436;
    background-repeat: no-repeat;
    background-position: center;
}
.col-xs-4 p{
    border-left: solid 5px #B5D436;
    padding-left: 10px;
    margin: 0;
    font-weight:700;
}
.col-xs-8 p{
    line-height:140%;
}
.btn-primary-large---extend{
    color: #fff;
    background-color: #B5D436;
    font-size: 18px;
    font-weight: 700;
}
.btn-primary---extend{
    color: #fff;
    background-color: #B5D436;
    font-size: 18px;
    font-weight: 700;
}
.form-btn{
    width: 297px;
    height: 50px;
    background-color: #B5D436;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.form-btn-blue{
    color: #fff!important;
    font-size: 18px;
    font-weight: 700;
    width: 458px;
    height: 50px;
    background-color: #4EDAF6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    border-radius: 4px;
}
.form-btn-blue a,
a:hover,
a:focus,
a:visited, {
      text-decoration: none!important;
}
.btn-wrap{
    margin-bottom: 30px;
}
.btn{
    background-color: #B5D436;
    width: 267px;
    height: 50px;    
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}
.container-narrow{
    background-color:#F1FFBA;
    width: 100%;
}
.container-narrow .wrap{
    width: 799px;
    padding: 40px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}
.confirmation-btn-wrap .alert-info---extend p {
    text-align: left;
}
.btn-print{
    width: 180px;
    height: 35px;
    background-color: #B5D436;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
}
.circle{
    width: 116px;
    height: 116px;
    background-color: #FFFFFF;
    border-radius: 50%;
    text-align: center;
    padding: 35px 0 0 0;
    margin: 0px 40px 0 0;
    line-height: 24px;
    vertical-align: middle;
}    
footer .between{
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
}
.form-signin-boothForm {
    width: 761px;
    margin: 0 auto 40px auto;
    background-color: #F9F9F9;
    padding: 40px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin-boothForm p small{
    margin-bottom: 0;
}
.form-signin-boothForm h3{
    text-align: left;
    padding-left: 10px;
    margin-bottom: 40px;
}
.form-signin-boothForm-wrap{
    margin-left: auto;
    margin-right: auto;
    width: 460px;
    text-align: center;
}
.form-signin-boothForm input[type="text"]{
    font-size: 16px;
    height: auto;
    margin: 10px auto 30px auto;
    padding: 7px 9px;
    width: 460px;
    display: block;
}
.form-signin-boothForm input[type="password"] {
    font-size: 16px;
    height: auto;
    margin: 10px auto 40px auto;
    padding: 7px 9px;
    width: 460px;
    display: block;
}
.form-signin-boothForm p{
    width: 460px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.form-password{
    padding: 20px 25px 30px 25px;
    background-color: #F9F9F9;
    font-size: 16px;
    margin: 20px 0 0 0;
    overflow: hidden;
}
.form-password h3{
    font-size: 18px;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 10px;
}


.alert-info---extend {
    color: #707070;
    background-color: #FFFFFF;
    border:solid 1px #D2D2D2;
    padding:20px;
    margin: 20px 0 40px 0;
  }
.alert-info---extend p{
    font-size: 14px;
    line-height: 180%;
}

.alert-attention {
    color: #707070;
    padding: 0px 40px 0 40px;
  }
.alert-attention p{
    font-size: 14px;
    line-height: 20px;
}
.logout{
    width: 799px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: right;
}

.logout .btn---extend{
    background-color: #707070;
    width: 100px;
    height: 30px;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

.attention{
    padding: 20px;
    width: 799px;
    margin-left: auto;
    margin-right: auto;
}
.attention p{
    text-align: left;
    font-size: 14px;
}

.form-signin {
    max-width: 716px;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
}```

IE9中有关于打印预览问题的解决方案吗？

0 个答案: