IE9在打印時出現多個選擇溢出

Question

我在打印多個選擇時忽略了選擇邊框，IE9出現問題。

下面是如何重現問題：

1. 打開IE9在Windows 7
2. 前往W3Schools的的multiple select edit page。
3. 現在突出顯示選項並複製/粘貼，直到出現一長串重複項。
4. 然後刪除尺寸屬性。
5. 單擊「編輯並單擊我」，以便重新加載頁面，並且您現在可以在第二個面板中選擇已修改的選擇。
6. 現在，打印文檔（甚至使用XPS查看器）。

對我來說，所有的選項都打印在頁面上，即使select只有4個選項元素高。如果您將「size」屬性保留爲默認值2，這種情況仍然會在某種程度上發生，但在更改或刪除它時更加明顯。

是否有其他人遇到過這種情況？這是一個IE錯誤？有誰知道解決方法？

Answer 1

似乎有不爲這方面的任何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和original post有關此修復程序

Answer 2

您可以通過在IE9兼容模式下查看網站來解決此問題。通常，IE會確定它無法正確顯示站點，並允許您從地址欄中打開兼容模式的選項，但有時您需要明確設置它。

如何打開兼容模式 - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - 我用的方法中的第一個2