Как исправить некоторые проблемы с печатью очень простой HTML

Question

У меня есть очень простой HTML:

<div id="advisor">
    <div id="print_this_container">
        <form>
            <input type="button" value=" Print this page "
                onclick="window.print();return false;" />
        </form>
    </div>
    <div id="top_section">
        <div class="left_box" style="position: relative;">
            <div id="avatar_container">
                <img class="avatar" src="<%= @advisor.avatar_url %>" />
            </div>
        </div>
        <div class="right_box">
            <h2><strong>Council on Emerging Markets</strong></h2>
        </div>
    </div>

</div>

Связанный CSS:

#advisor{
    width: 800px;
}
#top_section{
    border-bottom: 1px solid #666 !important; 
    height: 200px;
}
.right_box{
    float: left; 
    padding-left: 25px; 
    padding-top: 50px; 
    width: 550px;
}
.left_box{
    background: #ccc; 
    width: 200px; 
    float: left; 
    text-align: center; 
    height: 100%;
}
img.avatar{
    width: 150px;
}

И в моем print.css

#advisor{
    width: auto;
    }
#print_this_container{
    display: none;
    }

Отлично выглядит на моей веб-странице. Тем не менее, когда я печатаю его, возникают следующие проблемы:

• Верхняя граница раздела исчезает
• Изображение сжимается
• Правое поле отображается под левый ящик, он не всплывает
• Цвет фона слева исчезает

Кто-нибудь знает, как исправить эти проблемы?

Answer 1

Существует ряд проблем с печатью из браузера. Многие вещи, относящиеся к печати, не работают в большинстве браузеров, и даже если они поддерживаются несколькими браузерами, они обрабатываются по-разному

Мы потратили две недели на то, чтобы печатать этикетки с помощью браузера - в конце концов, мы выбрали несколько решений, которые терпят неудачу настолько изящно, насколько это возможно ...

Во-первых, мы обнаруживаем серебряный свет и вспышку - если они присутствуют, мы используем их для печати. ​​

Далее у нас есть фрагмент кода, который загружает веб-браузер в память на сервере и делает снимок страницы с определенным URL-адресом - это создает изображение, которое мы затем возвращаем клиенту для печати. Это нормально для нашего сценария, но вы можете проверить использование mem / etc. для сайтов большого объема.

Некоторые вещи, которые мы нашли: Поля страницы - РЕАЛЬНАЯ боль (особенно для ярлыков!). Кажется, что только определенные версии Opera позволят вам изменять поля страницы из CSS

Фоновые изображения и цвета обычно не печатаются браузерами (для экономии чернил). В большинстве браузеров есть возможность включить печать BG.

В Firefox загляните в: config

print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages

В IE я думаю, что это под File-> Page Setup ...

Очевидно, что ни один из них не поможет вам, так как они не могут быть установлены самим сайтом - это зависит от того, кем будут пользователи, независимо от того, можете ли вы установить это намеренно или нет. В противном случае вы можете попытаться использовать обычное не фоновое изображение, размещенное за вашим контентом?

По моему опыту, float не работает при печати. ​​Однако прошло уже много времени с тех пор, как я пытался, и возможно, что теперь это будет работать, если вы в настоящее время предоставляете явную ширину для своей страницы (100%?) Я думаю, что большинство браузеров используют сжатие по размеру для печати по умолчанию.

Еще одна интересная ширина страницы - я нашел только очень ограниченные свойства «ширины», которые, кажется, работают - в какой-то момент я почти прибегнул к таблицам. Пока проценты работают нормально, авто не работает.

Попробуйте посмотреть Здесь и Здесь для некоторых решений и Здесь для диаграммы совместимости браузера