Is there any solution about print preview problem in IE9? - html

Question

Nice to meet you.
I'm making a confirmation screen by using html5 and css3 (I also use bootstrap). Suddenly I have to apply it in IE9 and be able to print it. I thought I've solved about this problem, but it doesn't work well in actual IE9.
In IE9 print preview, they rendered 100pages. It doesn't seem to depend on the length of the pages.
Is there anybody who experienced this situation?
How did you solve it?
Thank you for reading,
Karen
I tried to make print.css and wrote the link
<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;
}```