HTML，CSS - 在Firefox中打印頁面無法正常顯示

我確實需要優化此頁面（http://filipcz.ideatech.cz/mproj/components/tisk.php）以便在紙張上打印（標準A4紙張尺寸）。我的網頁在Chrome，IE或Edge中效果不錯，但Firefox顯示效果不佳。 HTML，CSS - 在Firefox中打印頁面無法正常顯示

//編輯：試圖描述清晰，我真正需要才達到：我換成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？

非常感謝您的幫助。

來源

2016-03-30 Filip CZ

這是一個糟糕的代碼我的朋友，我不知道你想達到什麼目的？只需刪除浮標，並將正確的html標籤，＆標籤丟失。 –

我需要獲得與我的問題中的圖片相同的外觀（適用於Chrome的正確情況）。當我刪除所有花車時，文字「Seznamprojektů」將位於左側StředníprůmyslováškolaEdvardaBeneše
aObchodníakademieBřeclav，這對我來說是錯誤的。我需要在同一行右邊有這個文字「」Seznamprojektů「StředníprůmyslováškolaEdvardaBeneše
aObchodníakademieBřeclav。我現在寫得更清楚了嗎？ –

試試這個，我只是去掉了彩車&添加HTML，頭部& 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>

，如果你想這給正確的，只是在代碼中進行更改。我把「Seznamprojektů」在同一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>

來源

2016-03-30 14:09:16

嗯，我需要這個

Seznam projektů

在右側 –

謝謝你Rayan，問題現在解決了。 –

@FilipCZ歡迎您，我真的建議學習Bootrap專門爲初學者，這很容易，你可以用最少的代碼和最少的知識，實現很多，請谷歌Bootstrap CSS –

也許嘗試漂浮在破碎的div上。

來源

2016-03-30 13:53:57

我試圖用'浮動'來玩，但沒有成功，但感謝您的快速反應。任何其他想法ppl？ –

刪除浮動：左邊的div，並將內聯塊添加到下面的div。這適用於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>

來源

2016-03-30 14:02:40 AnatPort

謝謝，部分固定，但仍然存在問題，右標題（鋪設在

行，但我需要它在上面） –

http：// i.share.pho.to/368392e8_l.png –

你確定你還沒忘記刪除浮動：對吧？這是我的看法http://imgur.com/USrkBRu – AnatPort

也許你可以使用

<div style="border-top:1 solid ....>

代替

<hr>

來源

2016-03-30 14:34:35 Will

HTML，CSS - 在Firefox中打印頁面無法正常顯示

回答

相關問題