2014-11-06 100 views
3

我有一個基於此模板的index.html:http://startbootstrap.com/template-overviews/sb-admin-2/進行了一些較小的更改(在我的情況下,我使用了navbar-fixed-top,並更改了.sidebar位置以固定在sb-admin -2.css)在Firefox中打印引導頁面

該指數是靜態的,僅通過改變在點擊事件的部分內容,例如

(index.html的這塊)

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>System User's Guide</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all"> 

    <!-- MetisMenu CSS --> 
    <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/sb-admin-2.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <script src="js/respond.js"></script> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

<div id="wrapper"> 

     <!-- Navigation --> 
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0" id="top"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.html">System</a> 
      </div> 
      <!-- /.navbar-header --> 

      <div class="navbar-default sidebar" role="navigation"> 
       <div class="sidebar-nav navbar-collapse"> 
        <ul class="nav" id="side-menu"> 
         <li class="sidebar-search"> 
          <div class="input-group custom-search-form"> 
           <input type="text" class="form-control" placeholder="Search..."> 
           <span class="input-group-btn"> 
           <button class="btn btn-default" type="button"> 
            <i class="fa fa-search"></i> 
           </button> 
          </span> 
          </div> 
          <!-- /input-group --> 
         </li> 
         <li class="active"><a href="index.html">Home</a></li> 
         <li><a onclick="openPage('pages/login/loginwelcome.html')" href="#">Login & Welcome</a></li>      
        </ul> 
       </div> 
       <!-- /.sidebar-collapse --> 
      </div> 
      <!-- /.navbar-static-side --> 
     </nav> 

     <!-- Page Content --> 
     <div id="page-wrapper"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <div id="content"> 
         <h1 class="page-header">Home</h1> 
         <p>Welcome to our User Guide.</p> 
        </div>  
       </div> 
       <!-- /.col-lg-12 --> 
      </div> 
      <!-- /.row --> 
     </div> 
     <!-- /#page-wrapper --> 

    </div> 
    <!-- /#wrapper --> 

    <!-- jQuery Version 1.11.0 --> 
    <script src="js/jquery-1.11.0.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Metis Menu Plugin JavaScript --> 
    <script src="js/plugins/metisMenu/metisMenu.min.js"></script> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="js/ie10-viewport-bug-workaround.js"></script> 

    <!-- Custom Theme JavaScript --> 
    <script src="js/sb-admin-2.js"></script> 

    <script> 
     function openPage(page) { 
      $("#content").load(page); 
    } 
</script> 

</body> 

</html> 

(loginwelcome.html)

<html>  
    <h1 class="page-header">Login & Welcome</h1> 
    <ol class="breadcrumb"> 
     <li><a href="index.html">Home</a> <span class="glyphicon glyphicon-circle-arrow-right"></span></li> 
     <li class="active">Login & Welcome</li> 
    </ol> 


<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a href="#links" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">Content<span class="glyphicon glyphicon-chevron-down pull-right"></span></a> 
     </h4> 
    </div> 
    <div id="links" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     <a href="javascript:openPage('pages/login/login.html')">Login</a></br> 
     <a href="javascript:openPage('pages/login/welcome.html')">Welcome Screen</a></br> 
     </div> 
    </div> 
    </div> 
</div> 

     <p>Test</p> 
</html> 

所以,問題是:當我嘗試在Chrome或IE中打印loginwelcome.html時,它完美地工作(將內容div寬度擴展到100%,隱藏側邊欄等)。但是當我嘗試在Firefox中打印時,會出現巨大的左邊距。我嘗試使用引導打印響應類以及修改css中的媒體@print進行一些更改,但幾乎就像firefox無法識別media @print中的更改。我還嘗試了print_printer reset(在about:config中)並在本節中更改一些打印參數,但是一旦更換打印機,問題就會再次出現。 此外,我希望有更好的方法來做到這一點,或者我只是在我的代碼中做錯了事情,因此很難要求用戶完成所有這些「解決方法」。

(對不起任何錯誤/壞的解釋,它的第一次,我問的東西在這裏)

回答

0

這聽起來像你可能已經嘗試過這樣的事情,但對我來說了以下工作。順便說一下,我使用bootstrap。

確保您希望打印的DOM元素具有「可打印」類。

在你的CSS,請確保您有:

@media print { 
    html, body { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    } 
    .printable { 
    position: absolute; 
    left: 0; 
    top: -13%; 
    width: 100%; 
    } 
    // Firefox-specific print styling: 
    @supports (-moz-appearance:meterbar) { 
    .printable { 
     left  : -50%; 
     width : 200%; 
     font-size: 0.85em; 
    } 
    } 
} 

給這個一杆。

0

遇到同樣的問題(在Firefox中打印,有一個巨大的左邊距)。以前的答案幫了很大忙。但是,我必須將樣式設置爲容器類才能正確使用(Bootstrap)。因此,確定正確的div並設置瀏覽器特定的樣式應該可以正常工作。

@@supports (-moz-appearance:meterbar) { 
    .container { 
    margin: 0; 
    font-size: 0.90em; 
    width: 100%; 
    } 
}