Многократное переполнение в IE9 при печати

Question

У меня проблемы с IE9, игнорирующим границы выбора при печати множественного выбора.

Вот как воссоздать проблему:

1. Откройте IE9 в Windows 7.
2. Перейдите на страницу множественного выбора редактирования w3schools .
3. Теперь выделите параметры и копируйте / вставляйте, пока не появится длинный список дубликатов.
4. Затем удалите атрибут размера.
5. Нажмите «Изменить и нажмите меня», чтобы страница перезагрузилась, и теперь у вас есть измененный выбор на второй панели.
6. Теперь распечатайте документ (даже используя программу просмотра XPS).

Для меня все параметры печатаются на странице, хотя высота элемента выбора составляет всего 4 элемента. Это все еще происходит в некоторой степени, если вы оставите атрибут «size» со значением по умолчанию, равным 2, но гораздо более очевидно, когда он будет изменен или удален.

Кто-нибудь еще испытывает это? Это ошибка IE? Кто-нибудь знает об обходном пути?

Answer 1

Вы можете обойти это, просмотрев сайт в режиме совместимости IE9.Обычно IE определяет, что он не может правильно отобразить сайт, и дает вам возможность включить режим совместимости из адресной строки, но иногда вам нужно явно установить его.

Как включить режим совместимости - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - я использовал первый в методе 2.

Answer 2

Кажется, что нет никакого решения CSS для этого.Вместо этого я написал небольшой скрипт jQuery, который копирует содержимое <select multiple> в <div>, чтобы его можно было распечатать.Затем я применил немного CSS, чтобы он выглядел как выделение, и отображал копию только при фактической печати. ​​

Скрипт:

//jQuery required
$(function() {
  if(!$.browser.msie) return false;
  $('select[multiple]').each(function() {
    $lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable');

    //update printable on changes
    $(this).after($lPrintableDiv).change(function($aEvent){
      updatePrintable($aEvent.target);
    });

    //run once on load
    updatePrintable(this);
  });
});

function updatePrintable($aTarget) {
  var $lSelect = $($aTarget);
  var $lSelected = $($aTarget).val();
  var $lPrintable = $('[data-for="'+$aTarget.id+'"]');

  $($lPrintable).width($lSelect.width()).height($lSelect.height());
  $($lPrintable).html('');

  $($aTarget).children().each(function($lElm){
    $lVal = $(this).val();
    $lLabel = $('<label />').text($lVal);
    $lOption = $('<input type="checkbox" />').val($lVal);

    if($(this).is(':selected'))
    $lOption.prop('checked', true);

    $lPrintable.append($lOption).append($lLabel);
  });
}

CSS:

.printable {
    border: 1px solid grey;
    display: none;
    overflow: auto;
}

    .printable label {
        display: block;
        font: .8em sans-serif;
        overflow: hidden;
        white-space: nowrap;
    }

    .printable [type="checkbox"] {
        display: none;
    }

    .printable [type="checkbox"]:checked + label {
        background: #3399ff;
        color: white;
    }

@media print {
    select[multiple] { display: none; }
    .printable { display: inline-block; }
    .printable [type="checkbox"]:checked + label { background: grey; }
}

Также см. jsFiddle и оригинальный пост об этом исправлении