很高兴认识你
我正在使用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;
}```