1

我创建了一个链接到我的 html 页面的打印样式表。字体、颜色等的更改在打印版本中有效，但我无法在打印版本中更改 div 的大小。例如，如果我的页面上有一个 300px X 300px 的内容 div，如果我更改打印版本中的尺寸，它不会更改它。为了找出问题的根源，我使用了检查元素来查看我的打印页面中是否有一个 css 覆盖了它。我发现内容 div 的宽度是由 body 宽度控制的。所以我尝试更改打印样式表中的内容高度和正文 div。那没有用。我还尝试为主 css 和打印 css 创建一个单独的样式表。那没有用。有没有另一种方法可以解决这个问题......可能类似于断点，但对于 html？

HTML：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--- TITLE - FROM SPECIFIC TO GENERAL --->
    <title>Page</title>
    <cfinclude template="/assets2011/webfonts/comment.htm" />
    <link rel="stylesheet" type="text/css"        href="/assets2011/MyFontsWebfontsOrderM2845569_css.css" />
    <link rel="stylesheet" type="text/css" href="/assets2011/css/global.css" />
    <link  href="print.css" type="text/css" rel="stylesheet" media="print"/>
    <style>

     body{
     width: 8700px;
     height:2000px;
     overflow: hidden;
     }
     #section{
     width: 8000px;
     float: left;
      height: 1000;
      z-index: 1;
      }
         #content{
       width: 1000px; height:300px; margin-top: 10px; margin-left: 50px; overflow: auto;
       }
      .navbarLeft{
      height: 700px;
      width: 40px;
       top:0;
     z-index: 2;
       position:absolute;
      background-position: 50% 30%;
       background-image: url(navL.png);
     background-repeat: no-repeat;
    opacity: 0.05;
      }
      .navbarLeft:hover{
       opacity: 0.5;
       }
        .navbarRight{
       height: 700px;
      width: 40px;
    top: 0;
     z-index: 2;
    position: absolute;
    background-position: 50% 30%;
    background-image: url(navR.png);
    background-repeat: no-repeat;
    opacity: 0.05;
    left: 2013px;
     }
    .navbarRight:hover{
      opacity: 0.5;
    }
    table,tr,td {
    border:1px solid black;
    }

    </style>

     </head>
      <body>
      <!--Factor 1-->
     <div class="section" id="factor1">
     <div id="content">  
     <!--Begin Content-->
            <p>textiyiuypilkhjkujp;mjl;juipoupoj;hikhiyuiuj</p>
        </div>  
    <!--End Content-->

      <!-- Navigation -->
     <ul class="nav">  
    <a href="#factor2"><div class= "navbarLeft" id="menu" style="left: 755px;"></div></a>
      </ul>
      </div>
      <!--End Factor 1--> 


   <!--Factor 2-->
   <div class="section" id="factor2">
    <div id="content">
        <p>text2khlikhlkj;ljlji0piomloj;lkjoippm,klikp</p>
     </div>
     <ul class="nav">
     <a href="#factor1"><div class= "navbarRight" id="menu" style="left: 2005px;"></div>  
      </a>
     <a href="#factor3"><div class= "navbarLeft" id="menu" style="left: 2755px;"></div></a>
     </ul>
    </div>
     <!--End Factor 2-->

    <!--JavaScript-->
     <script type="text/javascript"   
               src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
      </script>
      </body>
    </html>

CSS 打印样式表：

       body{
         width: 1000px;
        }

    #section, .navbarLeft, .navbarRight{
    display:none;
    }

    #content{
       font-size: 110px;
       overflow:visible;
       height: 1000px;
       page-break-after: always;
       margin-top:10px; 
       margin-left:50px; 
    } 

    p a:after {
    content: " (" attr(href) ")";
    font-size: 50%;
    }
4

1 回答 1

0

我发现 Chrome 浏览器开发者工具非常适合调试 CSS 问题。

在 Chrome 中打开页面并按 F12

在此处输入图像描述

查看元素选项卡的右侧，您将看到应用于左侧所选 HTML 元素的所有 CSS。

您可以在工具箱中编辑 CSS，它会立即使用您的更改更新浏览器窗口。

可以在此处找到有关这些工具的更多信息：https ://developers.google.com/chrome-developer-tools/

于 2013-04-24T16:05:22.327 回答