如何解决FireFox浏览器打印问题 - 大差距和缺少内容

时间:2017-07-21 00:35:21

标签: javascript html css twitter-bootstrap printing

我有一个网页,其中包含一个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>&nbsp;&nbsp;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>&nbsp;&nbsp;Print form</button>
                        </p>
            </div>

0 个答案:

没有答案