title: My @media print doesn't display correctly with Firefox?
body: <p>The print looks great on Chrome and Safari, but weird on Firefox. I couldn't find resources on how to fix @media print on Firefox? Any advice is greatly appreciated! </p>
  
  <p>Edit: The page breaks don't work for me on Firefox. I'm using Twitter Bootstrap and on Firefox the text doesn't align in the same way as on e.g. Chrome. </p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>@media print {
     h1 {
        color: #000;
     }
  
     .navbar {
        display: none;
     }
  
     h1, h2, h3 {
    page-break-after: avoid;
     }    
  
  
  a[href^=http]:after {
         content:" &lt;" attr(href) "&gt; ";
      }
  
  a[href^="#"]:after {
         content: "";
  }
  
     body {
        width: 100%;
        margin: 0;
        padding: 0;
        background: none;
     }
  
    @page {
       margin: 2cm;
    }
  
  }
  </code></pre>