1

HTML ページにリンクする印刷スタイル シートを作成しました。フォント、色などの変更は印刷版で機能しますが、印刷版では div のサイズを変更できません。たとえば、ページに 300px X 300px のコンテンツ div がある場合、印刷版でサイズを変更しても変更されません。問題の原因を突き止めるために、インスペクト要素を使用して、css が印刷ページでそれをオーバーライドしているかどうかを確認しました。content 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 に答える