HTML, CSS - Версия для печати не отображается правильно в Firefox

Мне действительно нужно оптимизировать эту страницу (http://filipcz.ideatech.cz/mproj/components/tisk.php) для печати на бумаге (стандартный формат бумаги формата А4). Моя страница работает неплохо в Chrome, IE или Edge, но Firefox плохо ее показывает. HTML, CSS - Версия для печати не отображается правильно в Firefox

// Edit: Попытка описать понятнее, что мне действительно нужно для того чтобы достигнуть: я заменил 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). Когда я удаляю все поплавки, этот текст «Seznam projektů» будет на стороне LEFT UNDER Střední průmyslová škola Edvarda Beneše
a Obchodní akademie Břeclav, что для меня не так. Мне нужно иметь этот текст «« Seznam projektů »с правой стороны на той же линии, что и Střední průmyslová škola Edvarda Beneše
a Obchodní akademie Břeclav. Я написал его теперь яснее? –

попробовать это, я только удалил поплавки & добавлены HTML, глава & теги тела

<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>

источник

2016-03-30 14:09:16

Ну, мне это нужно

Seznam projektů

с правой стороны –

Спасибо, Райан, проблема решена сейчас. –

@FilipCZ приветствую вас, я действительно рекомендую изучать Bootrap специально для начинающих, это легко, и вы можете добиться многого с минимальным кодом и минимальными знаниями, пожалуйста, google it Bootstrap CSS –

Возможно, попробуйте поплавок слева на сломанном div.

источник

2016-03-30 13:53:57

Я попытался сыграть с« поплавком », но безуспешно, но спасибо за вашу быструю реакцию. Любые другие идеи ppl? –

удалить поплавок: слева от левого div и добавить встроенный блок в следующие div. это работает для хрома и 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

ответ

Смежные вопросы