用于打印的CSS3分页符不会随机打破

时间:2015-06-28 02:38:36

标签: html css css3

我一直试图解决这个问题一段时间,但我无法解决这个问题。我想弄清楚这是一个已知问题还是我只是做错了! :/

我试图在页面的最后<h2>上让页面进入新页面(打印时)。但是,它似乎在每次第一次<h2>之后就会中断,即使它不应该破坏到适合页面的最后一个<h2>

CSS代码:

 @media print{
   html, body {
    width: 8.5in;
    height: 11in;
    margin: 0.5in;
    }
    h2:last-child {
     page-break-after:always;
    }
}

HTML CODE:

  <meta charset="UTF-8" />

  <title>Apple Bavarian Torte</title>
  <script src="modernizr-1.5.js"></script>

  <link href="dwbase.css" rel="stylesheet" />

  <link href="dwlayout.css" rel="stylesheet" media="only screen"/>

 <link href="dweffects.css" rel="stylesheet" media="only screen" />

 <link href="dwprint.css" rel="stylesheet" media="only print" />

  <header>
     <div id="div1">
        Recipes | Ingredients | Articles <br />
        <input type="search" id="sbox" name="sfield" />
        <input type="button" id="sbutton" value="Search" placeholder="search term" />
     </div>
     <div id="div2">
        Password <br />
        <input type="text" id="pwd" name="pwd" placeholder="password" />
        <input type="button" id="lbutton" value="Log In" />
     </div>
     <div id="div3">
        User Name <br />
        <input type="text" id="user" name="user" placeholder="username" />
     </div>


     <h1>dessertWeb</h1>
     <nav class="horizontal">
        <ul>
           <li><a href="#">recipes</a></li>
           <li><a href="#">menus</a></li>
           <li><a href="#">holidays</a></li>
           <li><a href="#">market</a></li>
           <li><a href="#">shopping</a></li>
           <li><a href="#">columns</a></li>
           <li><a href="#">messages</a></li>
        </ul>
     </nav>

  </header>


  <section id="left">

     <nav class="vertical">
        <h1>Categories</h1>
        <ul>
           <li><a href="#">Cakes</a></li>
           <li><a href="#">Candies</a></li>
           <li><a href="#">Chocolate</a></li>
           <li><a href="#">Cookies</a></li>
           <li><a href="#">Crisps</a></li>
           <li><a href="#">Crumbles</a></li>
           <li><a href="#">Custards</a></li>
           <li><a href="#">Frozen Treats</a></li>
           <li><a href="#">Gelatins</a></li>
           <li><a href="#">Liqueur Desserts</a></li>
           <li><a href="#">Marshmallows</a></li>
           <li><a href="#">Meringues</a></li>
           <li><a href="#">Mousse</a></li>
           <li><a href="#">Pies</a></li>
           <li><a href="#">Pralines</a></li>
           <li><a href="#">Sauces</a></li>
           <li><a href="#">Truffles</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <h1>Related Recipes</h1>
        <ul>
           <li><a href="#">Apple Crisp</a></li>
           <li><a href="#">Apple Fingers</a></li>
           <li><a href="#">Apple Streudel</a></li>
           <li><a href="#">Cherry Torte</a></li>
           <li><a href="#">Fruit Pie</a></li>
           <li><a href="#">Parfait</a></li>
           <li><a href="#">Strawberry Torte</a></li>
        </ul>
     </nav>

  </section>

  <section id="center">

     <article>
        <hgroup>
           <h1>Apple Bavarian Torte
               <img src="star.png" alt="3 1/2 stars" />
               <img src="star.png" alt="" />
               <img src="star.png" alt=""" />
               <img src="halfstar.png" alt="" />
           </h1>
           <h2>by Lemking</h2>
        </hgroup>

        <img id="dishimg" src="torte.jpg" alt="Torte image" width="250" />
        <p>A classic European torte baked in a springform pan. Cream cheese, 
           sliced almonds, and apples make this the perfect holiday treat 
           (12 servings).
        </p>
        <p><a href="#">Rate/Review</a> | <a href="#">Review Page</a></p>
     </article>

        <aside>
           <h1>Recipe Box</h1>
           <ul>
              <li><a href="#">Add to Recipe Box</a></li>
              <li><a href="#">Add to Shopping List</a></li>
              <li><a href="#">Share Recipe</a></li>
              <li><a href="#">Add to Menu</a></li>
              <li><a href="#">Customize Recipe</a></li>
              <li><a href="#">Share/Email</a></li>
           </ul>
        </aside>

        <h2>Ingredients</h2>    
        <ul>
           <li>1/2 cup butter</li>
           <li>1/3 cup white sugar</li> 
           <li>1/4 teaspoon vanilla extract</li>
           <li>1 cup all-purpose flour</li> 
           <li>1 (8 ounce) package cream cheese</li>
           <li>1/4 cup white sugar</li>
           <li>1 egg</li>
           <li>1/2 teaspoon vanilla extract</li>
           <li>6 apples - peeled, cored, and sliced</li> 
           <li>1/3 cup white sugar</li> 
           <li>1/2 teaspoon ground cinnamon</li>
           <li>1/4 cup sliced almonds</li>
        </ul>

        <h2>Directions</h2>
        <ol>
           <li>Preheat oven to 450&deg; F (230&deg; C).</li>
           <li>Cream together butter, sugar, vanilla, and flour.</li>
           <li>Press crust mixture into the flat bottom of a 9-inch springform pan. 
               Set aside.</li>
           <li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla.
               Pour cheese mixture over crust.</li>
           <li>Toss apples with sugar and cinnamon. Spread apple 
               mixture over all.</li>
           <li>Bake for 10 minutes. Reduce heat to 400&deg; F (200&deg; C) and continue 
               baking for 25 minutes.</li>
           <li>Sprinkle almonds over top of torte. Continue baking until lightly browned.
               Cool before removing from pan.</li>
        </ol>
  </section>

  <section id="right">

     <h1>Reviews</h1>
     <blockquote>
        <p>
           <img src="star.png" alt="4 stars" /> <img src="star.png" alt="" />
           <img src="star.png" alt="" /> <img src="star.png" alt="" />
        </p>
        <p>I loved the buttery taste of the crust which complements the apples 
           very nicely.</p>
        <p>
           &mdash; Reviewed on Sep. 22, 2014 by MMASON.
        </p>
     </blockquote>

     <blockquote>
        <p>
           <img src="star.png" alt="2 stars" /> <img src="star.png" alt="" />
        </p>
        <p>Nothing special. I like the crust, but there was a little too much 
           of it for my taste, and I liked the filling but there was too little 
           of it. I thought the crunchy apples combined with the sliced almonds 
           detracted from the overall flavor.</p>
        <p>
           &mdash; Reviewed on Sep. 1, 2014 by GLENDACHEF.
        </p>
     </blockquote>


     <blockquote>
        <p>
           <img src="star.png" alt="3 1/2 stars" /> <img src="star.png" alt="" />
           <img src="star.png" alt="" /> <img src="halfstar.png" alt="" />
        </p>
        <p>Delicious!! I recommend microwaving the apples for 3 minutes 
           before baking, to soften them. Great dessert - I'll be making it again 
           for the holidays.</p>
        <p>
           &mdash; Reviewed on August 28, 2014 by BBABS.
        </p>
     </blockquote>
  </section>

  <footer>
      dessertWeb &copy; 2014 English (US)
      <span>
        <a href="#">About</a>
        <a href="#">Developers</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Help</a>
      </span>
  </footer>

2 个答案:

答案 0 :(得分:2)

你要找的是“SECTION&gt; H2:last-of-type”,而不是“H2:last-child”,因为H2之后的OL是他们父母的最后一个孩子。

答案 1 :(得分:0)

由于我自己无法抓住最后一个&lt; H2&GT;所以我使用了这段代码:

 h2:nth-last-child(2) {

page-break-before:always;

 }