gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 10:33:59 24 4
gpt4 key购买 nike

我真的需要优化此页面 ( http://filipcz.ideatech.cz/mproj/components/tisk.php ) 以便在纸张(标准 A4 纸张尺寸)上打印。我的页面在 Chrome、IE 或 Edge 中运行良好,但 Firefox 显示效果很差。 The image describing my issue

//编辑:试图更清楚地描述我真正需要实现的目标:我替换了<i>Střední průmyslová škola Edvarda Beneše<br>a Obchodní akademie Břeclav</i>Some text on the left<i>Seznam projektů</i>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 来解决这个问题吗?

非常感谢您的帮助。

最佳答案

试试这个,我只删除了 float 并添加了 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 中并将其 float 到右侧

    <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 中无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36310900/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com