Question

我创建了一个链接到我的html页面的打印样式表。字体，颜色等的更改在打印版本中有效，但我无法在打印版本中更改div的大小。例如，如果我的页面上的内容div为300px X 300px，则在更改打印版本中的尺寸时不会更改它。为了找出问题的根源，我使用了inspect元素来查看css是否覆盖了我的打印页面。我发现内容div宽度由体宽控制。所以我尝试在打印样式表中更改内容高度和正文div。那没用。我还尝试为主css和print 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%;
    }

Answer 1

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

在Chrome中打开该页面并点击F12

enter image description here

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

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

有关这些工具的更多信息，请访问：https://developers.google.com/chrome-developer-tools/

如何在样式表中找出css覆盖css的内容？

1 个答案: