我有一个网页,其中包含一个div,用户可以使用具有onclick javascript功能的打印按钮进行打印。 div包含几个带引导类的paragrapgh。div还包含3个自举井,其中包含引导形式。
当我查看打印预览时,第1页显示div中的第一段,然后没有其他内容。打印预览显示了第2页和第3页上的更多内容。但是,它正在切断div末尾的一些内容。
我花了几个小时研究这个问题,并尝试了几种解决方案,其中大多数尝试修改溢出和浮动属性。这些都没有解决我的问题。
我有一个css打印规则,在打印时会隐藏打印按钮。我已禁用此css规则,但这没有任何区别。我也有1页分解前,我已经注释掉了,但这没什么区别。
使用chrome时,这些问题不存在。
我的FireFox浏览器版本是52.0.2(32位)。
我的Chrome浏览器版本为49.0.2.2623.112m。
我的操作系统是Windows XP。 附:请记住,我是一个非常缺乏经验的开发人员。
<div class="row" id="sign_up">
<p class="lead text-danger text-center">Please sign me up for the 7 day Carnival Cruise.
<br>
Please print and fill out this sign-up form for each person.
</p>
<br>
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary center-block"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
<form class="well form-horizontal" action="" method="post" id="sign-up_form">
<fieldset>
<!-- Form Name -->
<legend>Sign-Up Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">First Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group inline">
<label class="col-md-2 control-label" >Last Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Date input-->
<div class="form-group">
<label class="col-md-2 control-label" >Date of Birth:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input name="date" placeholder="MM/DD/YYY" class="form-control" type="date">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">E-Mail:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="" class="form-control" type="email">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Address:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">City:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label">State:</label>
<div class="col-md-6 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="state" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Zip Code:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="emerg_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="emerg_phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
</fieldset>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Inside Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Balcony Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Yes.<br> I do want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">No. <br>I don't want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<p class="no-indent text-danger">I understand the payment / cancellation policy as stated above:
<br>
(sign) ________________________________________
</p>
<p><mark>Please bring or mail this completed form with payment.</mark></p>
<br>
<p style="page-break-before: always">
<p>
If you have any questions, please call Michelle @ (810)-686-3524 or Denise @ (989)-876-6102.
<br>
1390 E. Willard Rd.
<br>
Clio, MI 48420
<br>
810 - 686 - 3524
<br>
<a href="http://milesawaytravel.net/index.html">www.milesawaytravel.net</a>
<br>
e-mail: <span class="text-primary">3524@Hughes.net</span>
<img class="responsive center-block" src="http://res.cloudinary.com/dx1tairmq/image/upload/v1499127232/miles%20away%20travel/newmatlogo.png" alt="miles away logo">
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
</p>
</div>