HTML,CSS - 打印页面在 Firefox 中无法正确显示

Question

我真的需要优化这个页面（http://filipcz.ideatech.cz/mproj/components/tisk.php) for printing on a paper (standard A4 paper size). My page works quite good in Chrome, IE or Edge, but Firefox displays it badly.

//编辑：试图更清楚地描述我真正需要实现的目标：我将 Střední průmyslová škola Edvarda Beneše a Obchodní akademie Břeclav 替换为 Some text on the left 并将 Seznam projektů 替换为 Text on the right side.

代码：

...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Databáze maturitních projektů</title>
    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    td { padding-left: 15px; padding-right: 15px; }
    @media print{
        .netisk{
            visibility: hidden;
        }
    }
    </style>
...

...
    <div align="center" class="netisk">
        <input type="button" value="Vytisknout" onclick="window.print();">
        <input type="button" value="Zavřít okno" onclick="window.close();">
        <hr style="width:30%;">
    </div>
    <div style="float: left;">
        <i>Some text on the left</i>
    </div>
    <div style="float: right;">
        <i>Text on the right side</i>
    </div>
    <hr style="width:100%;">
    <div align="center">

<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
    </div>
...

有什么方法可以使用 CSS 或 HTML 来解决这个问题吗？

非常感谢您的帮助。

Answer 1

也许尝试在损坏的 div 上向左浮动。

Answer 2

去掉左边div的float:left，在后面的div中加入inline-block。这适用于 chrome 和 firefox。

<div style="display:inline-block">
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
</div>
<div style="display:inline-block; float:right">
    <i>Seznam projektů</i>
</div>

Answer 3

试试这个，我只删除了浮动并添加了 HTML、head 和 body 标签

<html>  
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Databáze maturitních projektů</title>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
      }
    td { padding-left: 15px; padding-right: 15px; }
   </style>
   </head>
   <body>
   <div align="center" class="netisk">
    <input type="button" value="Vytisknout" onclick="window.print();">
    <input type="button" value="Zavřít okno" onclick="window.close();">
    <hr style="width:30%;">
</div>
<div>
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
</div>
<div>
    <i>Seznam projektů</i>
</div>
<hr style="width:100%;">
<div align="center">

 <table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th>     <th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí    práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
</div>
</body> 
</html>

如果你想让它显示在右边，只需在代码中更改它。我把"Seznam projektů"放在同一个div里面，然后向右浮动

    <div>
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
     <i style="float:right">Seznam projektů</i>
     </div>

HTML,CSS - 打印页面在 Firefox 中无法正确显示

HTML,CSS - Print page doesn't display correctly in Firefox

html

css

styles